<!doctype html>
<!--[if IE 7 ]>
<html class="no-js ie ie7 lte7 lte8 lte9" lang="zh"> <![endif]-->
<!--[if IE 8 ]>
<html class="no-js ie ie8 lte8 lte9" lang="zh"> <![endif]-->
<!--[if IE 9 ]>
<html class="no-js ie ie9 lte9" lang="zh"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html class="no-js" lang="zh"> <!--<![endif]-->
<head data-live-domain="api.jquery.com">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>Types | jQuery API Documentation</title>

    <meta name="author" content="JS Foundation - js.foundation">
    <meta name="description" content="">

    <meta name="viewport" content="width=device-width">

    <link rel="shortcut icon" href="../../jquery-wp-content/themes/jquery.com/i/favicon.ico">

    <link rel="stylesheet" href="../../jquery-wp-content/themes/jquery/css/base.css?v=3">
    <link rel="stylesheet" href="../../jquery-wp-content/themes/api.jquery.com/style.css">

    <script src="../../jquery-wp-content/themes/jquery/js/modernizr.custom.2.8.3.min.js"></script>

    <script src="https://code.jquery.com/jquery-1.11.3.js"></script>

    <script src="../../jquery-wp-content/themes/jquery/js/plugins.js"></script>
    <script src="../../jquery-wp-content/themes/jquery/js/main.js"></script>

    <script src="https://use.typekit.net/wde1aof.js"></script>
    <script>try {
        Typekit.load();
    } catch (e) {
    }</script>
    <!-- at the end of the HEAD -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css"/>
    <link rel="stylesheet" href="../../jquery-wp-content/themes/jquery/css/docsearch.css">

    <link rel='https://api.w.org/' href='../wp-json/'/>
    <meta name="generator" content="WordPress 4.5.2"/>
    <link rel="alternate" type="application/json+oembed"
          href="//api.jquery.com/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fapi.jquery.com%2FTypes%2F"/>
    <link rel="alternate" type="text/xml+oembed"
          href="//api.jquery.com/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fapi.jquery.com%2FTypes%2F&#038;format=xml"/>

</head>
<body class="api jquery page page-id-3 page-template-default page-slug-types single-author singular">

<header>
    <section id="global-nav">
        <nav>
            <div class="constrain">
                <ul class="projects">
                    <li class="project jquery"><a href="../../jquery.com" title="jQuery">jQuery</a></li>
                    <li class="project jquery-ui"><a href="../../jqueryui.com/" title="jQuery UI">jQuery UI</a></li>
                    <li class="project jquery-mobile"><a href="https://jquerymobile.com/" title="jQuery Mobile">jQuery
                        Mobile</a></li>
                    <li class="project sizzlejs"><a href="https://sizzlejs.com/" title="Sizzle">Sizzle</a></li>
                    <li class="project qunitjs"><a href="https://qunitjs.com/" title="QUnit">QUnit</a></li>
                </ul>
                <ul class="links">
                    <li><a href="https://plugins.jquery.com/">插件</a></li>
                    <li class="dropdown"><a href="https://contribute.jquery.org/">贡献</a>
                        <ul>
                            <li><a href="https://js.foundation/CLA">CLA</a></li>
                            <li><a href="https://contribute.jquery.org/style-guide/">样式指导</a></li>
                            <li><a href="https://contribute.jquery.org/triage/">Bug修复</a></li>
                            <li><a href="https://contribute.jquery.org/code/">编码</a></li>
                            <li><a href="https://contribute.jquery.org/documentation/">文档</a></li>
                            <li><a href="https://contribute.jquery.org/web-sites/">网站</a></li>
                        </ul>
                    </li>
                    <li class="dropdown"><a href="https://js.foundation/events">事件</a>
                        <ul class="wide">
                        </ul>
                    </li>
                    <li class="dropdown"><a href="https://jquery.org/support/">支持</a>
                        <ul>
                            <li><a href="https://learn.jquery.com/">学习中心</a></li>
                            <li><a href="https://irc.jquery.org/">IRC/Chat</a></li>
                            <li><a href="https://forum.jquery.com/">论坛</a></li>
                            <li><a href="https://stackoverflow.com/tags/jquery/info">Stack Overflow</a></li>
                            <li><a href="https://jquery.org/support/">商业支持</a></li>
                        </ul>
                    </li>
                    <li class="dropdown"><a href="https://js.foundation/">JS 基金会</a>
                        <ul>
                            <li><a href="https://js.foundation/about/join">加入</a></li>
                            <li><a href="https://js.foundation/about/members">成员</a></li>
                            <li><a href="https://js.foundation/about/leadership">领导</a></li>
                            <li><a href="https://js.foundation/community/code-of-conduct">组织</a></li>
                            <li><a href="https://js.foundation/about/donate">捐献</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </nav>
    </section>
</header>

<div id="container">
    <div id="logo-events" class="constrain clearfix">
        <h2 class="logo"><a href="../../jquery.com/" title="jQuery API Documentation">jQuery API Documentation</a>
        </h2>

        <aside>
            <div id="broadcast">
                <a href="https://js.foundation/about/donate" title="Support the JS Foundation"><img
                        src="../../jquery-wp-content/themes/jquery/content/donate.png" title="Support the JS Foundation"
                        alt="Support the JS Foundation" width="400" height="100"></a>
            </div>
        </aside>
    </div>

    <nav id="main" class="constrain clearfix">
        <div class="menu-top-container">
            <ul id="menu-top" class="menu">
                <li class="menu-item"><a href="../../jquery.com/download/">下载</a></li>
                <li class="menu-item current"><a href="../">API 文档</a></li>
                <li class="menu-item"><a href="../../blog.jquery.com/">博客</a></li>
                <li class="menu-item"><a href="../../plugins.jquery.com/">插件</a></li>
                <li class="menu-item"><a href="../../jquery.com/browser-support/">浏览器支持</a></li>
            </ul>
        </div>

        <form method="get" class="searchform" action="../../api.jquery.com/">
            <button type="submit" class="icon-search"><span class="visuallyhidden">search</span></button>
            <label>
                <span class="visuallyhidden">Search jQuery API Documentation</span>
                <input type="text" name="s" value=""
                       placeholder="搜索">
            </label>
        </form>
    </nav>

    <div id="content-wrapper" class="clearfix row">


        <div class="content-right twelve columns">
            <div id="content">
                <h1 class="entry-title">Types</h1>
                <hr>


                <style>
                    h2 {
                        font-size: 1.9em !important;
                    }

                    h3 {
                        font-size: 1.5em !important;
                    }

                    ol ul li {
                        font-size: 1em !important;
                    }

                    ol ul {
                        margin-left: 1.5em !important;
                    }
                </style>
                <p>This page documents data types appearing in jQuery function signatures, whether defined by JavaScript
                    itself or further restricted by jQuery. Unless explicitly stated otherwise, jQuery functions require
                    primitive values where applicable, and do not accept their Object-wrapped forms. If you want to
                    study these concepts in depth, take a look at <a
                            href="https://developer.mozilla.org/en-US/docs/Web/JavaScript">MDN</a>.
                </p>
                <p>You should be able to try out most of the examples below by just copying them to your browser&apos;s
                    JavaScript Console.
                </p>
                <p>Whenever an example mentions that a type defaults to a boolean value, the result is good to know when
                    using that type in a boolean context:
                </p>
                <div class="syntaxhighlighter javascript">
                    <table>
                        <tbody>
                        <tr>

                            <td class="gutter">

                                <div class="line n1">1</div>

                                <div class="line n2">2</div>

                                <div class="line n3">3</div>

                                <div class="line n4">4</div>

                                <div class="line n5">5</div>

                                <div class="line n6">6</div>

                            </td>

                            <td class="code">
                                <pre><div class="container"><div class="line"><code><span
                                        class="hljs-keyword">var</span> x = <span
                                        class="hljs-string">&quot;&quot;</span>;</code></div></div><div
                                        class="container"><div class="line"><code><span class="hljs-keyword">if</span> ( x ) {</code></div></div><div
                                        class="container"><div class="line"><code>  <span
                                        class="hljs-built_in">console</span>.log( <span class="hljs-string">&quot;x defaulted to true&quot;</span> );</code></div></div><div
                                        class="container"><div class="line"><code>} <span
                                        class="hljs-keyword">else</span> {</code></div></div><div class="container"><div
                                        class="line"><code>  <span class="hljs-built_in">console</span>.log( <span
                                        class="hljs-string">&quot;x defaulted to false&quot;</span> );</code></div></div><div
                                        class="container"><div class="line"><code>}</code></div></div></pre>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>

                <p>In this case, <code>&quot;x defaulted to false&quot;</code> is printed.
                </p>
                <p>To keep the examples short, the invert (&quot;not&quot;) operator and double-negation are used to
                    show a boolean context:
                </p>
                <div class="syntaxhighlighter javascript">
                    <table>
                        <tbody>
                        <tr>

                            <td class="gutter">

                                <div class="line n1">1</div>

                                <div class="line n2">2</div>

                                <div class="line n3">3</div>

                            </td>

                            <td class="code">
                                <pre><div class="container"><div class="line"><code><span
                                        class="hljs-keyword">var</span> x = <span
                                        class="hljs-string">&quot;&quot;</span>;</code></div></div><div
                                        class="container"><div class="line"><code>!x <span
                                        class="hljs-comment">// true</span></code></div></div><div class="container"><div
                                        class="line"><code>!!x <span class="hljs-comment">// false (Double negation: Since &quot;not (empty string)&quot; is true, negating that makes it false)</span></code></div></div></pre>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>

                <p>On to the actual types.
                </p>
                <div id="toctitle"><h2>Contents</h2></div>
                <ol>
                    <li class="toclevel-1"><a href="#Anything"><span class="toctext">Anything</span></a>
                    </li>
                    <li class="toclevel-1"><a href="#String"><span class="toctext">String</span></a>
                        <ul>
                            <li class="toclevel-2"><a href="#Quoting"><span class="toctext">Quoting</span></a></li>
                            <li class="toclevel-2"><a href="#Built-in_Methods"><span
                                    class="toctext">Built-in Methods</span></a></li>
                            <li class="toclevel-2"><a href="#Length_Property"><span
                                    class="toctext">Length Property</span></a></li>
                            <li class="toclevel-2"><a href="#Boolean_Default"><span
                                    class="toctext">Boolean Default</span></a></li>
                        </ul>
                    </li>
                    <li class="toclevel-1"><a href="#htmlString"><span class="toctext">htmlString</span></a></li>
                    <li class="toclevel-1"><a href="#Number"><span class="toctext">Number</span></a>
                        <ul>
                            <li class="toclevel-2"><a href="#Boolean_Default_2"><span
                                    class="toctext">Boolean Default</span></a></li>
                            <li class="toclevel-2"><a href="#Math"><span class="toctext">Math</span></a></li>
                            <li class="toclevel-2"><a href="#Parsing_Numbers"><span
                                    class="toctext">Parsing Numbers</span></a></li>
                            <li class="toclevel-2"><a href="#Numbers_to_Strings"><span class="toctext">Numbers to Strings</span></a>
                            </li>
                            <li class="toclevel-2"><a href="#NaN_and_Infinity"><span
                                    class="toctext">NaN and Infinity</span></a></li>
                            <li class="toclevel-2"><a href="#Integer"><span class="toctext">Integer</span></a></li>
                            <li class="toclevel-2"><a href="#Float"><span class="toctext">Float</span></a></li>
                        </ul>
                    </li>
                    <li class="toclevel-1"><a href="#Boolean"><span class="toctext">Boolean</span></a></li>
                    <li class="toclevel-1"><a href="#Object"><span class="toctext">Object</span></a>
                        <ul>
                            <li class="toclevel-2"><a href="#Dot_Notation"><span class="toctext">Dot Notation</span></a>
                            </li>
                            <li class="toclevel-2"><a href="#Array_Notation"><span class="toctext">Array Notation</span></a>
                            </li>
                            <li class="toclevel-2"><a href="#Iteration"><span class="toctext">Iteration</span></a></li>
                            <li class="toclevel-2"><a href="#Boolean_default_3"><span
                                    class="toctext">Boolean default</span></a></li>
                            <li class="toclevel-2"><a href="#Prototype"><span class="toctext">Prototype</span></a></li>
                        </ul>
                    </li>
                    <li class="toclevel-1"><a href="#Array"><span class="toctext">Array</span></a>
                        <ul>
                            <li class="toclevel-2"><a href="#Iteration_2"><span class="toctext">Iteration</span></a>
                            </li>
                            <li class="toclevel-2"><a href="#Boolean_Default_4"><span
                                    class="toctext">Boolean Default</span></a></li>
                            <li class="toclevel-2"><a href="#Array.3CType.3E_Notation"><span class="toctext">Array&lt;Type&gt; Notation</span></a>
                            </li>
                        </ul>
                    </li>
                    <li class="toclevel-1"><a href="#ArrayLikeObject"><span class="toctext">Array-Like Object</span></a>
                    </li>
                    <li class="toclevel-1"><a href="#PlainObject"><span class="toctext">PlainObject</span></a></li>
                    <li class="toclevel-1"><a href="#Date"><span class="toctext">Date</span></a></li>
                    <li class="toclevel-1"><a href="#Function"><span class="toctext">Function</span></a>
                        <ul>
                            <li class="toclevel-2"><a href="#Arguments"><span class="toctext">Arguments</span></a></li>
                            <li class="toclevel-2"><a href="#Context.2C_Call_and_Apply"><span class="toctext">Context, Call and Apply</span></a>
                            </li>
                            <li class="toclevel-2"><a href="#Scope"><span class="toctext">Scope</span></a></li>
                            <li class="toclevel-2"><a href="#Closures"><span class="toctext">Closures</span></a></li>
                            <li class="toclevel-2"><a href="#Proxy_Pattern"><span
                                    class="toctext">Proxy Pattern</span></a></li>
                        </ul>
                    </li>
                    <li class="toclevel-1"><a href="#Error"><span class="toctext">Error</span></a></li>
                    <li class="toclevel-1"><a href="#Selector"><span class="toctext">Selector</span></a></li>
                    <li class="toclevel-1"><a href="#Event"><span class="toctext">Event</span></a></li>
                    <li class="toclevel-1"><a href="#Element"><span class="toctext">Element</span></a></li>
                    <li class="toclevel-1"><a href="#Text"><span class="toctext">Text</span></a></li>
                    <li class="toclevel-1"><a href="#jQuery"><span class="toctext">jQuery</span></a></li>
                    <li class="toclevel-1"><a href="#XMLHttpRequest"><span class="toctext">XMLHttpRequest</span></a>
                    </li>
                    <li class="toclevel-1"><a href="#jqXHR"><span class="toctext">jqXHR</span></a></li>
                    <li class="toclevel-1"><a href="#Thenable"><span class="toctext">Thenable</span></a></li>
                    <li class="toclevel-1"><a href="#Deferred"><span class="toctext">Deferred Object</span></a></li>
                    <li class="toclevel-1"><a href="#Promise"><span class="toctext">Promise Object</span></a></li>
                    <li class="toclevel-1"><a href="#Callbacks"><span class="toctext">Callbacks Object</span></a></li>
                    <li class="toclevel-1"><a href="#XMLDocument"><span class="toctext">XML Document</span></a></li>
                    <li class="toclevel-1"><a href="#Assert"><span class="toctext">Qunit&apos;s Assert Object</span></a>
                    </li>
                </ol>

                <h2 id="Anything"> Anything </h2>
                <p>The <strong>Anything</strong> virtual type is used in jQuery documentation to indicate that any type
                    can be used or should be expected.
                </p>

                <h2 id="String"> String </h2>
                <p>A string in JavaScript is an immutable primitive value that contains none, one or many characters.
                </p>
                <div class="syntaxhighlighter javascript">
                    <table>
                        <tbody>
                        <tr>

                            <td class="gutter">

                                <div class="line n1">1</div>

                                <div class="line n2">2</div>

                            </td>

                            <td class="code">
                                <pre><div class="container"><div class="line"><code><span class="hljs-string">&quot;I&apos;m a String in JavaScript!&quot;</span></code></div></div><div
                                        class="container"><div class="line"><code><span class="hljs-string">&apos;So am I!&apos;</span></code></div></div></pre>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>

                <p>The type of a string is &quot;string&quot;.
                </p>
                <div class="syntaxhighlighter javascript">
                    <table>
                        <tbody>
                        <tr>

                            <td class="gutter">

                                <div class="line n1">1</div>

                            </td>

                            <td class="code">
                                <pre><div class="container"><div class="line"><code><span
                                        class="hljs-keyword">typeof</span> <span class="hljs-string">&quot;some string&quot;</span>; <span
                                        class="hljs-comment">// &quot;string&quot;</span></code></div></div></pre>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>

                <h3 id="Quoting"> Quoting </h3>
                <p>A string can be defined using single or double quotes. You can nest single quotes inside of double
                    quotes, and the other way around. To mix double quotes with double quotes (or single with single),
                    the nested ones have to be escaped with a backslash.
                </p>
                <div class="syntaxhighlighter javascript">
                    <table>
                        <tbody>
                        <tr>

                            <td class="gutter">

                                <div class="line n1">1</div>

                                <div class="line n2">2</div>

                                <div class="line n3">3</div>

                            </td>

                            <td class="code">
                                <pre><div class="container"><div class="line"><code><span class="hljs-string">&quot;You make &apos;me&apos; sad.&quot;</span></code></div></div><div
                                        class="container"><div class="line"><code><span class="hljs-string">&apos;That\&apos;s &quot;cranking&quot; good fun!&apos;</span></code></div></div><div
                                        class="container"><div class="line"><code><span class="hljs-string">&quot;&lt;a href=\&quot;home\&quot;&gt;Home&lt;/a&gt;&quot;</span></code></div></div></pre>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>

                <h3 id="Built-in_Methods"> Built-in Methods </h3>
                <p>A string in JavaScript has some built-in methods to manipulate the string, though the result is
                    always a new string - or something else, eg. split returns an <a href="../Types/index.html#Array"
                                                                                     title="Types">array</a>.
                </p>
                <div class="syntaxhighlighter javascript">
                    <table>
                        <tbody>
                        <tr>

                            <td class="gutter">

                                <div class="line n1">1</div>

                                <div class="line n2">2</div>

                                <div class="line n3">3</div>

                                <div class="line n4">4</div>

                                <div class="line n5">5</div>

                            </td>

                            <td class="code">
                                <pre><div class="container"><div class="line"><code><span class="hljs-string">&quot;hello&quot;</span>.charAt( <span
                                        class="hljs-number">0</span> ) <span
                                        class="hljs-comment">// &quot;h&quot;</span></code></div></div><div
                                        class="container"><div class="line"><code><span class="hljs-string">&quot;hello&quot;</span>.toUpperCase() <span
                                        class="hljs-comment">// &quot;HELLO&quot;</span></code></div></div><div
                                        class="container"><div class="line"><code><span class="hljs-string">&quot;Hello&quot;</span>.toLowerCase() <span
                                        class="hljs-comment">// &quot;hello&quot;</span></code></div></div><div
                                        class="container"><div class="line"><code><span class="hljs-string">&quot;hello&quot;</span>.replace( <span
                                        class="hljs-regexp">/e|o/g</span>, <span
                                        class="hljs-string">&quot;x&quot;</span> ) <span class="hljs-comment">// &quot;hxllx&quot;</span></code></div></div><div
                                        class="container"><div class="line"><code><span class="hljs-string">&quot;1,2,3&quot;</span>.split( <span
                                        class="hljs-string">&quot;,&quot;</span> ) <span class="hljs-comment">// [ &quot;1&quot;, &quot;2&quot;, &quot;3&quot; ]</span></code></div></div></pre>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>

                <h3 id="Length_Property"> Length Property </h3>
                <p>All strings have a length property.
                </p>
                <div class="syntaxhighlighter javascript">
                    <table>
                        <tbody>
                        <tr>

                            <td class="gutter">

                                <div class="line n1">1</div>

                                <div class="line n2">2</div>

                            </td>

                            <td class="code">
                                <pre><div class="container"><div class="line"><code><span class="hljs-string">&quot;Hello&quot;</span>.length <span
                                        class="hljs-comment">// 5</span></code></div></div><div class="container"><div
                                        class="line"><code><span class="hljs-string">&quot;&quot;</span>.length <span
                                        class="hljs-comment">// 0</span></code></div></div></pre>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>

                <h3 id="Boolean_Default"> Boolean Default </h3>
                <p>An empty string defaults to false:
                </p>
                <div class="syntaxhighlighter javascript">
                    <table>
                        <tbody>
                        <tr>

                            <td class="gutter">

                                <div class="line n1">1</div>

                                <div class="line n2">2</div>

                                <div class="line n3">3</div>

                                <div class="line n4">4</div>

                                <div class="line n5">5</div>

                            </td>

                            <td class="code">
                                <pre><div class="container"><div class="line"><code>!<span class="hljs-string">&quot;&quot;</span> <span
                                        class="hljs-comment">// true</span></code></div></div><div class="container"><div
                                        class="line"><code>!!<span class="hljs-string">&quot;&quot;</span> <span
                                        class="hljs-comment">// false</span></code></div></div><div class="container"><div
                                        class="line"><code>!<span class="hljs-string">&quot;hello&quot;</span> <span
                                        class="hljs-comment">// false</span></code></div></div><div class="container"><div
                                        class="line"><code>!<span class="hljs-string">&quot;true&quot;</span> <span
                                        class="hljs-comment">// false</span></code></div></div><div class="container"><div
                                        class="line"><code>!<span class="hljs-keyword">new</span> <span
                                        class="hljs-built_in">Boolean</span>( <span class="hljs-literal">false</span> ) <span
                                        class="hljs-comment">// false</span></code></div></div></pre>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>


                <h2 id="htmlString"> htmlString </h2>
                <p>A string is designated <strong>htmlString</strong> in jQuery documentation when it is used to
                    represent one or more DOM elements, typically to be created and inserted in the document. When
                    passed as an argument of the <code>jQuery()</code> function, the string is identified as HTML if it
                    starts with <code>&lt;tag ... &gt;</code>) and is parsed as such until the final <code>&gt;</code>
                    character. Prior to jQuery 1.9, a string was considered to be HTML if it contained <code
                    >&lt;tag ... &gt;</code> <em>anywhere within the string</em>.</p>
                <p>When a string is passed as an argument to a manipulation method such as <code>.append()</code>, it is
                    always considered to be HTML since jQuery&apos;s other common interpretation of a string (CSS
                    selectors) does not apply in those contexts.</p>
                <p>For explicit parsing of a string to HTML, the <code><a href="../jQuery.parseHTML/">$.parseHTML()</a></code>
                    method is available as of jQuery 1.8.</p>
                <div class="syntaxhighlighter javascript">
                    <table>
                        <tbody>
                        <tr>

                            <td class="gutter">

                                <div class="line n1">1</div>

                                <div class="line n2">2</div>

                                <div class="line n3">3</div>

                                <div class="line n4">4</div>

                                <div class="line n5">5</div>

                                <div class="line n6">6</div>

                                <div class="line n7">7</div>

                                <div class="line n8">8</div>

                                <div class="line n9">9</div>

                                <div class="line n10">10</div>

                                <div class="line n11">11</div>

                                <div class="line n12">12</div>

                                <div class="line n13">13</div>

                                <div class="line n14">14</div>

                            </td>

                            <td class="code">
                                <pre><div class="container"><div class="line"><code><span class="hljs-comment">// Appends &lt;b&gt;hello&lt;/b&gt;:</span></code></div></div><div
                                        class="container"><div class="line"><code>$( <span class="hljs-string">&quot;&lt;b&gt;hello&lt;/b&gt;&quot;</span> ).appendTo( <span
                                        class="hljs-string">&quot;body&quot;</span> );</code></div></div><div
                                        class="container"><div class="line"><code> </code></div></div><div
                                        class="container"><div class="line"><code><span class="hljs-comment">// Appends &lt;b&gt;hello&lt;/b&gt;:</span></code></div></div><div
                                        class="container"><div class="line"><code>$( <span class="hljs-string">&quot;&lt;b&gt;hello&lt;/b&gt;bye&quot;</span> ).appendTo( <span
                                        class="hljs-string">&quot;body&quot;</span> );</code></div></div><div
                                        class="container"><div class="line"><code> </code></div></div><div
                                        class="container"><div class="line"><code><span class="hljs-comment">// Syntax error, unrecognized expression: bye&lt;b&gt;hello&lt;/b&gt;</span></code></div></div><div
                                        class="container"><div class="line"><code>$( <span class="hljs-string">&quot;bye&lt;b&gt;hello&lt;/b&gt;&quot;</span> ).appendTo( <span
                                        class="hljs-string">&quot;body&quot;</span> );</code></div></div><div
                                        class="container"><div class="line"><code> </code></div></div><div
                                        class="container"><div class="line"><code><span class="hljs-comment">// Appends bye&lt;b&gt;hello&lt;/b&gt;:</span></code></div></div><div
                                        class="container"><div class="line"><code>$( $.parseHTML( <span
                                        class="hljs-string">&quot;bye&lt;b&gt;hello&lt;/b&gt;&quot;</span> ) ).appendTo( <span
                                        class="hljs-string">&quot;body&quot;</span> );</code></div></div><div
                                        class="container"><div class="line"><code> </code></div></div><div
                                        class="container"><div class="line"><code><span class="hljs-comment">// Appends &lt;b&gt;hello&lt;/b&gt;wait&lt;b&gt;bye&lt;/b&gt;:</span></code></div></div><div
                                        class="container"><div class="line"><code>$( <span class="hljs-string">&quot;&lt;b&gt;hello&lt;/b&gt;wait&lt;b&gt;bye&lt;/b&gt;&quot;</span> ).appendTo( <span
                                        class="hljs-string">&quot;body&quot;</span> );</code></div></div></pre>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>

                <h2 id="Number"> Number </h2>
                <p>Numbers in JavaScript are double-precision 64-bit format IEEE 754 values. They are immutable
                    primitive values, just like <a href="#String" title>strings</a>. All operators common in c-based
                    languages are available to work with numbers (+, -, *, /, %, =, +=, -=, *=, /=, ++, --).
                </p>
                <div class="syntaxhighlighter javascript">
                    <table>
                        <tbody>
                        <tr>

                            <td class="gutter">

                                <div class="line n1">1</div>

                                <div class="line n2">2</div>

                            </td>

                            <td class="code">
                                <pre><div class="container"><div class="line"><code><span class="hljs-number">12</span></code></div></div><div
                                        class="container"><div class="line"><code><span class="hljs-number">3.543</span></code></div></div></pre>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>

                <p>The type of a number is &quot;number&quot;.
                </p>
                <div class="syntaxhighlighter javascript">
                    <table>
                        <tbody>
                        <tr>

                            <td class="gutter">

                                <div class="line n1">1</div>

                                <div class="line n2">2</div>

                            </td>

                            <td class="code">
                                <pre><div class="container"><div class="line"><code><span
                                        class="hljs-keyword">typeof</span> <span class="hljs-number">12</span> <span
                                        class="hljs-comment">// &quot;number&quot;</span></code></div></div><div
                                        class="container"><div class="line"><code><span
                                        class="hljs-keyword">typeof</span> <span class="hljs-number">3.543</span> <span
                                        class="hljs-comment">// &quot;number&quot;</span></code></div></div></pre>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>

                <h3 id="Boolean_Default_2"> Boolean Default </h3>
                <p>If a number is zero, it defaults to false:
                </p>
                <div class="syntaxhighlighter javascript">
                    <table>
                        <tbody>
                        <tr>

                            <td class="gutter">

                                <div class="line n1">1</div>

                                <div class="line n2">2</div>

                                <div class="line n3">3</div>

                                <div class="line n4">4</div>

                            </td>

                            <td class="code">
                                <pre><div class="container"><div class="line"><code>!<span class="hljs-number">0</span> <span
                                        class="hljs-comment">// true</span></code></div></div><div class="container"><div
                                        class="line"><code>!!<span class="hljs-number">0</span> <span
                                        class="hljs-comment">// false</span></code></div></div><div class="container"><div
                                        class="line"><code>!<span class="hljs-number">1</span> <span
                                        class="hljs-comment">// false</span></code></div></div><div class="container"><div
                                        class="line"><code>!-<span class="hljs-number">1</span> <span
                                        class="hljs-comment">// false</span></code></div></div></pre>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>

                <p>Due to the implementation of numbers as double-precision values, the following result is not an
                    error:
                </p>
                <div class="syntaxhighlighter javascript">
                    <table>
                        <tbody>
                        <tr>

                            <td class="gutter">

                                <div class="line n1">1</div>

                            </td>

                            <td class="code">
                                <pre><div class="container"><div class="line"><code><span class="hljs-number">0.1</span> + <span
                                        class="hljs-number">0.2</span> <span
                                        class="hljs-comment">// 0.30000000000000004</span></code></div></div></pre>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>

                <p><br>
                </p>
                <h3 id="Math"> Math </h3>
                <p>JavaScript provides utilities to work with numbers in the Math object:
                </p>
                <div class="syntaxhighlighter javascript">
                    <table>
                        <tbody>
                        <tr>

                            <td class="gutter">

                                <div class="line n1">1</div>

                                <div class="line n2">2</div>

                            </td>

                            <td class="code">
                                <pre><div class="container"><div class="line"><code><span
                                        class="hljs-built_in">Math</span>.PI <span class="hljs-comment">// 3.141592653589793</span></code></div></div><div
                                        class="container"><div class="line"><code><span
                                        class="hljs-built_in">Math</span>.cos( <span class="hljs-built_in">Math</span>.PI ) <span
                                        class="hljs-comment">// -1</span></code></div></div></pre>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>

                <h3 id="Parsing_Numbers"> Parsing Numbers </h3>
                <p>parseInt and parseFloat help parsing strings into numbers. Both do some implicit conversion if the
                    base isn&apos;t specified:
                </p>
                <div class="syntaxhighlighter javascript">
                    <table>
                        <tbody>
                        <tr>

                            <td class="gutter">

                                <div class="line n1">1</div>

                                <div class="line n2">2</div>

                                <div class="line n3">3</div>

                                <div class="line n4">4</div>

                                <div class="line n5">5</div>

                                <div class="line n6">6</div>

                            </td>

                            <td class="code">
                                <pre><div class="container"><div class="line"><code><span
                                        class="hljs-built_in">parseInt</span>( <span
                                        class="hljs-string">&quot;123&quot;</span> ) = <span
                                        class="hljs-number">123</span> <span
                                        class="hljs-comment">// (implicit decimal)</span></code></div></div><div
                                        class="container"><div class="line"><code><span
                                        class="hljs-built_in">parseInt</span>( <span
                                        class="hljs-string">&quot;010&quot;</span> ) = <span
                                        class="hljs-number">8</span> <span
                                        class="hljs-comment">// (implicit octal)</span></code></div></div><div
                                        class="container"><div class="line"><code><span
                                        class="hljs-built_in">parseInt</span>( <span class="hljs-string">&quot;0xCAFE&quot;</span> ) = <span
                                        class="hljs-number">51966</span> <span class="hljs-comment">// (implicit hexadecimal)</span></code></div></div><div
                                        class="container"><div class="line"><code><span
                                        class="hljs-built_in">parseInt</span>( <span
                                        class="hljs-string">&quot;010&quot;</span>, <span class="hljs-number">10</span> ) = <span
                                        class="hljs-number">10</span> <span
                                        class="hljs-comment">// (explicit decimal)</span></code></div></div><div
                                        class="container"><div class="line"><code><span
                                        class="hljs-built_in">parseInt</span>( <span
                                        class="hljs-string">&quot;11&quot;</span>, <span class="hljs-number">2</span> ) = <span
                                        class="hljs-number">3</span> <span
                                        class="hljs-comment">// (explicit binary)</span></code></div></div><div
                                        class="container"><div class="line"><code><span
                                        class="hljs-built_in">parseFloat</span>( <span class="hljs-string">&quot;10.10&quot;</span> ) = <span
                                        class="hljs-number">10.1</span></code></div></div></pre>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>

                <h3 id="Numbers_to_Strings"> Numbers to Strings </h3>
                <p>When appending numbers to string, the result is always a string. The operator is the same, so be
                    careful: If you want to add numbers and then append them to a string, put parentheses around the
                    numbers:
                </p>
                <div class="syntaxhighlighter javascript">
                    <table>
                        <tbody>
                        <tr>

                            <td class="gutter">

                                <div class="line n1">1</div>

                                <div class="line n2">2</div>

                                <div class="line n3">3</div>

                                <div class="line n4">4</div>

                            </td>

                            <td class="code">
                                <pre><div class="container"><div class="line"><code><span class="hljs-string">&quot;&quot;</span> + <span
                                        class="hljs-number">1</span> + <span class="hljs-number">2</span>; <span
                                        class="hljs-comment">// &quot;12&quot;</span></code></div></div><div
                                        class="container"><div class="line"><code><span
                                        class="hljs-string">&quot;&quot;</span> + ( <span class="hljs-number">1</span> + <span
                                        class="hljs-number">2</span> ); <span
                                        class="hljs-comment">// &quot;3&quot;</span></code></div></div><div
                                        class="container"><div class="line"><code><span
                                        class="hljs-string">&quot;&quot;</span> + <span
                                        class="hljs-number">0.0000001</span>; <span class="hljs-comment">// &quot;1e-7&quot;</span></code></div></div><div
                                        class="container"><div class="line"><code><span
                                        class="hljs-built_in">parseInt</span>( <span
                                        class="hljs-number">0.0000001</span> ); <span
                                        class="hljs-comment">// 1 (!)</span></code></div></div></pre>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>

                <p>Or you use the String class provided by javascript, which try to parse a value as string:
                </p>
                <div class="syntaxhighlighter javascript">
                    <table>
                        <tbody>
                        <tr>

                            <td class="gutter">

                                <div class="line n1">1</div>

                                <div class="line n2">2</div>

                            </td>

                            <td class="code">
                                <pre><div class="container"><div class="line"><code><span
                                        class="hljs-built_in">String</span>( <span
                                        class="hljs-number">1</span> ) + <span
                                        class="hljs-built_in">String</span>( <span class="hljs-number">2</span> ); <span
                                        class="hljs-comment">// &quot;12&quot;</span></code></div></div><div
                                        class="container"><div class="line"><code><span
                                        class="hljs-built_in">String</span>( <span class="hljs-number">1</span> + <span
                                        class="hljs-number">2</span> ); <span
                                        class="hljs-comment">// &quot;3&quot;</span></code></div></div></pre>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>

                <h3 id="NaN_and_Infinity"> NaN and Infinity </h3>
                <p>Parsing something that isn&apos;t a number results in NaN. isNaN helps to detect those cases:
                </p>
                <div class="syntaxhighlighter javascript">
                    <table>
                        <tbody>
                        <tr>

                            <td class="gutter">

                                <div class="line n1">1</div>

                                <div class="line n2">2</div>

                            </td>

                            <td class="code">
                                <pre><div class="container"><div class="line"><code><span
                                        class="hljs-built_in">parseInt</span>( <span class="hljs-string">&quot;hello&quot;</span>, <span
                                        class="hljs-number">10</span> ) <span class="hljs-comment">// NaN</span></code></div></div><div
                                        class="container"><div class="line"><code><span
                                        class="hljs-built_in">isNaN</span>( <span class="hljs-built_in">parseInt</span>(<span
                                        class="hljs-string">&quot;hello&quot;</span>, <span
                                        class="hljs-number">10</span>) ) <span
                                        class="hljs-comment">// true</span></code></div></div></pre>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>

                <p>Division by zero results in Infinity:
                </p>
                <div class="syntaxhighlighter javascript">
                    <table>
                        <tbody>
                        <tr>

                            <td class="gutter">

                                <div class="line n1">1</div>

                            </td>

                            <td class="code">
                                <pre><div class="container"><div class="line"><code><span class="hljs-number">1</span> / <span
                                        class="hljs-number">0</span> <span
                                        class="hljs-comment">// Infinity</span></code></div></div></pre>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>

                <p>Both NaN and Infinity are of type &quot;number&quot;:
                </p>
                <div class="syntaxhighlighter javascript">
                    <table>
                        <tbody>
                        <tr>

                            <td class="gutter">

                                <div class="line n1">1</div>

                                <div class="line n2">2</div>

                            </td>

                            <td class="code">
                                <pre><div class="container"><div class="line"><code><span
                                        class="hljs-keyword">typeof</span> <span class="hljs-literal">NaN</span> <span
                                        class="hljs-comment">// &quot;number&quot;</span></code></div></div><div
                                        class="container"><div class="line"><code><span
                                        class="hljs-keyword">typeof</span> <span
                                        class="hljs-literal">Infinity</span> <span class="hljs-comment">// &quot;number&quot;</span></code></div></div></pre>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>

                <p>Note that NaN compares in a strange way:
                </p>
                <div class="syntaxhighlighter javascript">
                    <table>
                        <tbody>
                        <tr>

                            <td class="gutter">

                                <div class="line n1">1</div>

                            </td>

                            <td class="code">
                                <pre><div class="container"><div class="line"><code><span
                                        class="hljs-literal">NaN</span> === <span class="hljs-literal">NaN</span> <span
                                        class="hljs-comment">// false (!)</span></code></div></div></pre>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>

                <p>But:
                </p>
                <div class="syntaxhighlighter javascript">
                    <table>
                        <tbody>
                        <tr>

                            <td class="gutter">

                                <div class="line n1">1</div>

                            </td>

                            <td class="code">
                                <pre><div class="container"><div class="line"><code><span
                                        class="hljs-literal">Infinity</span> === <span
                                        class="hljs-literal">Infinity</span> <span
                                        class="hljs-comment">// true</span></code></div></div></pre>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>

                <h3 id="Integer"> Integer </h3>
                <p>An integer is a plain Number type, but whenever explicitly mentioned, indicates that a
                    non-floating-point number is expected.
                </p>
                <h3 id="Float"> Float </h3>
                <p>A float is a plain Number type, just as Integer, but whenever explicitly mentioned, indicates that a
                    floating-point number is expected.
                </p>
                <p><br>
                </p>
                <h2 id="Boolean"> Boolean </h2>
                <p>A boolean in JavaScript can be either true or false:
                </p>
                <div class="syntaxhighlighter javascript">
                    <table>
                        <tbody>
                        <tr>

                            <td class="gutter">

                                <div class="line n1">1</div>

                                <div class="line n2">2</div>

                            </td>

                            <td class="code">
                                <pre><div class="container"><div class="line"><code><span class="hljs-keyword">if</span> ( <span
                                        class="hljs-literal">true</span> ) <span class="hljs-built_in">console</span>.log( <span
                                        class="hljs-string">&quot;always!&quot;</span> );</code></div></div><div
                                        class="container"><div class="line"><code><span class="hljs-keyword">if</span> ( <span
                                        class="hljs-literal">false</span> ) <span class="hljs-built_in">console</span>.log( <span
                                        class="hljs-string">&quot;never!&quot;</span> );</code></div></div></pre>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>

                <h2 id="Object"> Object </h2>
                <p>Everything in JavaScript is an object, though some are more objective (haha). The easiest way to
                    create an object is the object literal:
                </p>
                <div class="syntaxhighlighter javascript">
                    <table>
                        <tbody>
                        <tr>

                            <td class="gutter">

                                <div class="line n1">1</div>

                                <div class="line n2">2</div>

                                <div class="line n3">3</div>

                                <div class="line n4">4</div>

                                <div class="line n5">5</div>

                            </td>

                            <td class="code">
                                <pre><div class="container"><div class="line"><code><span
                                        class="hljs-keyword">var</span> x = {};</code></div></div><div
                                        class="container"><div class="line"><code><span class="hljs-keyword">var</span> y = {</code></div></div><div
                                        class="container"><div class="line"><code>  <span class="hljs-attr">name</span>: <span
                                        class="hljs-string">&quot;Pete&quot;</span>,</code></div></div><div
                                        class="container"><div class="line"><code>  <span class="hljs-attr">age</span>: <span
                                        class="hljs-number">15</span></code></div></div><div class="container"><div
                                        class="line"><code>};</code></div></div></pre>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>

                <p>The type of an object is &quot;object&quot;:
                </p>
                <div class="syntaxhighlighter javascript">
                    <table>
                        <tbody>
                        <tr>

                            <td class="gutter">

                                <div class="line n1">1</div>

                            </td>

                            <td class="code">
                                <pre><div class="container"><div class="line"><code><span
                                        class="hljs-keyword">typeof</span> {} <span class="hljs-comment">// &quot;object&quot;</span></code></div></div></pre>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>

                <h3 id="Dot_Notation"> Dot Notation </h3>
                <p>You can write and read properties of an object using the dot notation:
                </p>
                <div class="syntaxhighlighter javascript">
                    <table>
                        <tbody>
                        <tr>

                            <td class="gutter">

                                <div class="line n1">1</div>

                                <div class="line n2">2</div>

                                <div class="line n3">3</div>

                                <div class="line n4">4</div>

                            </td>

                            <td class="code">
                                <pre><div class="container"><div class="line"><code>y.name <span class="hljs-comment">// &quot;Pete&quot;</span></code></div></div><div
                                        class="container"><div class="line"><code>y.age <span
                                        class="hljs-comment">// 15</span></code></div></div><div class="container"><div
                                        class="line"><code>x.name = y.name + <span
                                        class="hljs-string">&quot; Pan&quot;</span> <span class="hljs-comment">// &quot;Pete Pan&quot;</span></code></div></div><div
                                        class="container"><div class="line"><code>x.age = y.age + <span
                                        class="hljs-number">1</span> <span
                                        class="hljs-comment">// 16</span></code></div></div></pre>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>

                <h3 id="Array_Notation"> Array Notation </h3>
                <p>Or you write and read properties using the array notation, which allows you to dynamically choose the
                    property:
                </p>
                <div class="syntaxhighlighter javascript">
                    <table>
                        <tbody>
                        <tr>

                            <td class="gutter">

                                <div class="line n1">1</div>

                                <div class="line n2">2</div>

                                <div class="line n3">3</div>

                                <div class="line n4">4</div>

                                <div class="line n5">5</div>

                                <div class="line n6">6</div>

                                <div class="line n7">7</div>

                            </td>

                            <td class="code">
                                <pre><div class="container"><div class="line"><code><span
                                        class="hljs-keyword">var</span> operations = {</code></div></div><div
                                        class="container"><div class="line"><code>  <span
                                        class="hljs-attr">increase</span>: <span
                                        class="hljs-string">&quot;++&quot;</span>,</code></div></div><div
                                        class="container"><div class="line"><code>  <span
                                        class="hljs-attr">decrease</span>: <span
                                        class="hljs-string">&quot;--&quot;</span></code></div></div><div
                                        class="container"><div class="line"><code>};</code></div></div><div
                                        class="container"><div class="line"><code><span class="hljs-keyword">var</span> operation = <span
                                        class="hljs-string">&quot;increase&quot;</span>;</code></div></div><div
                                        class="container"><div class="line"><code>operations[ operation ] <span
                                        class="hljs-comment">// &quot;++&quot;</span></code></div></div><div
                                        class="container"><div class="line"><code>operations[ <span class="hljs-string">&quot;multiply&quot;</span> ] = <span
                                        class="hljs-string">&quot;*&quot;</span>; <span class="hljs-comment">// &quot;*&quot;</span></code></div></div></pre>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>

                <h3 id="Iteration"> Iteration </h3>
                <p>Iterating over objects is easy with the for-in-loop:
                </p>
                <div class="syntaxhighlighter javascript">
                    <table>
                        <tbody>
                        <tr>

                            <td class="gutter">

                                <div class="line n1">1</div>

                                <div class="line n2">2</div>

                                <div class="line n3">3</div>

                                <div class="line n4">4</div>

                                <div class="line n5">5</div>

                                <div class="line n6">6</div>

                                <div class="line n7">7</div>

                            </td>

                            <td class="code">
                                <pre><div class="container"><div class="line"><code><span
                                        class="hljs-keyword">var</span> obj = {</code></div></div><div
                                        class="container"><div class="line"><code>  <span class="hljs-attr">name</span>: <span
                                        class="hljs-string">&quot;Pete&quot;</span>,</code></div></div><div
                                        class="container"><div class="line"><code>  <span class="hljs-attr">age</span>: <span
                                        class="hljs-number">15</span></code></div></div><div class="container"><div
                                        class="line"><code>};</code></div></div><div class="container"><div
                                        class="line"><code><span class="hljs-keyword">for</span>( key <span
                                        class="hljs-keyword">in</span> obj ) {</code></div></div><div class="container"><div
                                        class="line"><code>  alert( <span class="hljs-string">&quot;key is &quot;</span> + [ key ] + <span
                                        class="hljs-string">&quot;, value is &quot;</span> + obj[ key ] );</code></div></div><div
                                        class="container"><div class="line"><code>}</code></div></div></pre>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>

                <p>Note that for-in-loop can be spoiled by extending Object.prototype (see <a
                        href="https://erik.eae.net/archives/2005/06/06/22.13.54/" class="external text"
                        title="https://erik.eae.net/archives/2005/06/06/22.13.54/">Object.prototype is verboten</a>) so
                    take care when using other libraries.
                </p>
                <p>jQuery provides a generic <a href="../jQuery.each/"><em>each</em> function</a> to iterate over
                    properties of objects, as well as elements of arrays:
                </p>
                <div class="syntaxhighlighter javascript">
                    <table>
                        <tbody>
                        <tr>

                            <td class="gutter">

                                <div class="line n1">1</div>

                                <div class="line n2">2</div>

                                <div class="line n3">3</div>

                            </td>

                            <td class="code">
                                <pre><div class="container"><div class="line"><code>jQuery.each( obj, <span
                                        class="hljs-function"><span class="hljs-keyword">function</span>(<span
                                        class="hljs-params"> key, value </span>) </span>{</code></div></div><div
                                        class="container"><div class="line"><code>  <span
                                        class="hljs-built_in">console</span>.log( <span class="hljs-string">&quot;key&quot;</span>, key, <span
                                        class="hljs-string">&quot;value&quot;</span>, value );</code></div></div><div
                                        class="container"><div class="line"><code>});</code></div></div></pre>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>

                <p>The drawback is that the callback is called in the context of each value and you therefore lose the
                    context of your own object if applicable. More on this below at Functions.
                </p>

                <h3 id="Boolean_default_3"> Boolean default </h3>
                <p>An object, no matter if it has properties or not, never defaults to false:
                </p>
                <div class="syntaxhighlighter javascript">
                    <table>
                        <tbody>
                        <tr>

                            <td class="gutter">

                                <div class="line n1">1</div>

                                <div class="line n2">2</div>

                            </td>

                            <td class="code">
                                <pre><div class="container"><div class="line"><code>!{} <span class="hljs-comment">// false</span></code></div></div><div
                                        class="container"><div class="line"><code>!!{} <span class="hljs-comment">// true</span></code></div></div></pre>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>

                <h3 id="Prototype"> Prototype </h3>
                <p>All objects have a prototype property. Whenever the interpreter looks for a property, it also checks
                    in the object&apos;s prototype if the property is not found on the object itself. jQuery uses the
                    prototype extensively to add methods to jQuery instances. Internally, jQuery makes
                    <code>jQuery.fn</code> an alias of <code>jQuery.prototype</code> so you can use either one (though
                    plugin developers have standardized on <code>fn</code>).
                </p>
                <div class="syntaxhighlighter javascript">
                    <table>
                        <tbody>
                        <tr>

                            <td class="gutter">

                                <div class="line n1">1</div>

                                <div class="line n2">2</div>

                                <div class="line n3">3</div>

                                <div class="line n4">4</div>

                                <div class="line n5">5</div>

                                <div class="line n6">6</div>

                                <div class="line n7">7</div>

                                <div class="line n8">8</div>

                                <div class="line n9">9</div>

                                <div class="line n10">10</div>

                                <div class="line n11">11</div>

                                <div class="line n12">12</div>

                                <div class="line n13">13</div>

                                <div class="line n14">14</div>

                            </td>

                            <td class="code">
                                <pre><div class="container"><div class="line"><code><span
                                        class="hljs-keyword">var</span> form = $(<span class="hljs-string">&quot;#myform&quot;</span>);</code></div></div><div
                                        class="container"><div class="line"><code><span
                                        class="hljs-built_in">console</span>.log( form.clearForm ); <span
                                        class="hljs-comment">// undefined</span></code></div></div><div
                                        class="container"><div class="line"><code> </code></div></div><div
                                        class="container"><div class="line"><code><span class="hljs-comment">// jQuery.fn === jQuery.prototype</span></code></div></div><div
                                        class="container"><div class="line"><code>jQuery.fn.clearForm = <span
                                        class="hljs-function"><span class="hljs-keyword">function</span>(<span
                                        class="hljs-params"></span>) </span>{</code></div></div><div class="container"><div
                                        class="line"><code>  <span class="hljs-keyword">return</span> <span
                                        class="hljs-built_in">this</span>.find( <span class="hljs-string">&quot;:input&quot;</span> ).each(<span
                                        class="hljs-function"><span class="hljs-keyword">function</span>(<span
                                        class="hljs-params"></span>) </span>{</code></div></div><div class="container"><div
                                        class="line"><code>    <span class="hljs-built_in">this</span>.value = <span
                                        class="hljs-string">&quot;&quot;</span>;</code></div></div><div
                                        class="container"><div class="line"><code>  }).end();</code></div></div><div
                                        class="container"><div class="line"><code>};</code></div></div><div
                                        class="container"><div class="line"><code> </code></div></div><div
                                        class="container"><div class="line"><code><span class="hljs-comment">// works for all instances of jQuery objects, because</span></code></div></div><div
                                        class="container"><div class="line"><code><span class="hljs-comment">// the new method was added to the prototype</span></code></div></div><div
                                        class="container"><div class="line"><code><span
                                        class="hljs-built_in">console</span>.log( form.clearForm ); <span
                                        class="hljs-comment">// function</span></code></div></div><div
                                        class="container"><div
                                        class="line"><code>form.clearForm();</code></div></div></pre>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>


                <h2 id="Array"> Array </h2>
                <p>Arrays in JavaScript are mutable lists with a few built-in methods. You can define arrays using the
                    array literal:
                </p>
                <div class="syntaxhighlighter javascript">
                    <table>
                        <tbody>
                        <tr>

                            <td class="gutter">

                                <div class="line n1">1</div>

                                <div class="line n2">2</div>

                            </td>

                            <td class="code">
                                <pre><div class="container"><div class="line"><code><span
                                        class="hljs-keyword">var</span> x = [];</code></div></div><div
                                        class="container"><div class="line"><code><span class="hljs-keyword">var</span> y = [ <span
                                        class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span
                                        class="hljs-number">3</span> ];</code></div></div></pre>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>

                <p>The type of an array is &quot;object&quot;:
                </p>
                <div class="syntaxhighlighter javascript">
                    <table>
                        <tbody>
                        <tr>

                            <td class="gutter">

                                <div class="line n1">1</div>

                                <div class="line n2">2</div>

                            </td>

                            <td class="code">
                                <pre><div class="container"><div class="line"><code><span
                                        class="hljs-keyword">typeof</span> []; <span class="hljs-comment">// &quot;object&quot;</span></code></div></div><div
                                        class="container"><div class="line"><code><span
                                        class="hljs-keyword">typeof</span> [ <span class="hljs-number">1</span>, <span
                                        class="hljs-number">2</span>, <span class="hljs-number">3</span> ]; <span
                                        class="hljs-comment">// &quot;object&quot;</span></code></div></div></pre>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>

                <p>Reading and writing elements to an array uses the array-notation:
                </p>
                <div class="syntaxhighlighter javascript">
                    <table>
                        <tbody>
                        <tr>

                            <td class="gutter">

                                <div class="line n1">1</div>

                                <div class="line n2">2</div>

                            </td>

                            <td class="code">
                                <pre><div class="container"><div class="line"><code>x[ <span
                                        class="hljs-number">0</span> ] = <span
                                        class="hljs-number">1</span>;</code></div></div><div class="container"><div
                                        class="line"><code>y[ <span class="hljs-number">2</span> ] <span
                                        class="hljs-comment">// 3</span></code></div></div></pre>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>

                <h3 id="Iteration_2"> Iteration </h3>
                <p>An array has a length property that is useful for iteration:
                </p>
                <div class="syntaxhighlighter javascript">
                    <table>
                        <tbody>
                        <tr>

                            <td class="gutter">

                                <div class="line n1">1</div>

                                <div class="line n2">2</div>

                                <div class="line n3">3</div>

                            </td>

                            <td class="code">
                                <pre><div class="container"><div class="line"><code><span
                                        class="hljs-keyword">for</span> ( <span
                                        class="hljs-keyword">var</span> i = <span class="hljs-number">0</span>; i &lt; a.length; i++ ) {</code></div></div><div
                                        class="container"><div class="line"><code>  <span class="hljs-comment">// Do something with a[i]</span></code></div></div><div
                                        class="container"><div class="line"><code>}</code></div></div></pre>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>

                <p>When performance is critical, reading the length property only once can help to speed things up. This
                    should be used only when a performance bottleneck was discovered:
                </p>
                <div class="syntaxhighlighter javascript">
                    <table>
                        <tbody>
                        <tr>

                            <td class="gutter">

                                <div class="line n1">1</div>

                                <div class="line n2">2</div>

                                <div class="line n3">3</div>

                            </td>

                            <td class="code">
                                <pre><div class="container"><div class="line"><code><span
                                        class="hljs-keyword">for</span> ( <span
                                        class="hljs-keyword">var</span> i = <span class="hljs-number">0</span>, j = a.length; i &lt; j; i++ ) {</code></div></div><div
                                        class="container"><div class="line"><code>  <span class="hljs-comment">// Do something with a[i]</span></code></div></div><div
                                        class="container"><div class="line"><code>}</code></div></div></pre>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>

                <p>Another variation defines a variable that is filled for each iteration, removing the array-notation
                    from the loop-body. It does not work when the array contains 0 or empty strings!
                </p>
                <div class="syntaxhighlighter javascript">
                    <table>
                        <tbody>
                        <tr>

                            <td class="gutter">

                                <div class="line n1">1</div>

                                <div class="line n2">2</div>

                                <div class="line n3">3</div>

                            </td>

                            <td class="code">
                                <pre><div class="container"><div class="line"><code><span
                                        class="hljs-keyword">for</span> ( <span
                                        class="hljs-keyword">var</span> i = <span class="hljs-number">0</span>, item; item = a[i]; i++ ) {</code></div></div><div
                                        class="container"><div class="line"><code>  <span class="hljs-comment">// Do something with item</span></code></div></div><div
                                        class="container"><div class="line"><code>}</code></div></div></pre>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>

                <p>jQuery provides a generic <a href="../jQuery.each/"><em>each</em> function</a> to iterate over
                    element
                    of arrays, as well as properties of objects:
                </p>
                <div class="syntaxhighlighter javascript">
                    <table>
                        <tbody>
                        <tr>

                            <td class="gutter">

                                <div class="line n1">1</div>

                                <div class="line n2">2</div>

                                <div class="line n3">3</div>

                                <div class="line n4">4</div>

                            </td>

                            <td class="code">
                                <pre><div class="container"><div class="line"><code><span
                                        class="hljs-keyword">var</span> x = [ <span class="hljs-number">1</span>, <span
                                        class="hljs-number">2</span>, <span class="hljs-number">3</span> ];</code></div></div><div
                                        class="container"><div class="line"><code>jQuery.each( x, <span
                                        class="hljs-function"><span class="hljs-keyword">function</span>(<span
                                        class="hljs-params"> index, value </span>) </span>{</code></div></div><div
                                        class="container"><div class="line"><code>  <span
                                        class="hljs-built_in">console</span>.log( <span class="hljs-string">&quot;index&quot;</span>, index, <span
                                        class="hljs-string">&quot;value&quot;</span>, value );</code></div></div><div
                                        class="container"><div class="line"><code>});</code></div></div></pre>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>

                <p>The drawback is that the callback is called in the context of each value and you therefore lose the
                    context of your own object if applicable. More on this below at Functions.
                </p>
                <p>The length property can also be used to add elements to the end of an array. That is equivalent to
                    using the push-method:
                </p>
                <div class="syntaxhighlighter javascript">
                    <table>
                        <tbody>
                        <tr>

                            <td class="gutter">

                                <div class="line n1">1</div>

                                <div class="line n2">2</div>

                                <div class="line n3">3</div>

                                <div class="line n4">4</div>

                            </td>

                            <td class="code">
                                <pre><div class="container"><div class="line"><code><span
                                        class="hljs-keyword">var</span> x = [];</code></div></div><div
                                        class="container"><div class="line"><code>x.push( <span
                                        class="hljs-number">1</span> );</code></div></div><div class="container"><div
                                        class="line"><code>x[ x.length ] = <span
                                        class="hljs-number">2</span>;</code></div></div><div class="container"><div
                                        class="line"><code>x <span class="hljs-comment">// [ 1, 2 ]</span></code></div></div></pre>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>

                <p>You&apos;ll see both variations a lot when looking through JavaScript library code.
                </p>
                <p>Other built-in methods are reverse, join, shift, unshift, pop, slice, splice and sort:
                </p>
                <div class="syntaxhighlighter javascript">
                    <table>
                        <tbody>
                        <tr>

                            <td class="gutter">

                                <div class="line n1">1</div>

                                <div class="line n2">2</div>

                                <div class="line n3">3</div>

                                <div class="line n4">4</div>

                                <div class="line n5">5</div>

                                <div class="line n6">6</div>

                                <div class="line n7">7</div>

                                <div class="line n8">8</div>

                            </td>

                            <td class="code">
                                <pre><div class="container"><div class="line"><code><span
                                        class="hljs-keyword">var</span> x = [ <span class="hljs-number">0</span>, <span
                                        class="hljs-number">3</span>, <span class="hljs-number">1</span>, <span
                                        class="hljs-number">2</span> ];</code></div></div><div class="container"><div
                                        class="line"><code>x.reverse()      <span
                                        class="hljs-comment">// [ 2, 1, 3, 0 ]</span></code></div></div><div
                                        class="container"><div class="line"><code>x.join(<span class="hljs-string">&quot; &#x2013; &quot;</span>)    <span
                                        class="hljs-comment">// &quot;2 - 1 - 3 - 0&quot;</span></code></div></div><div
                                        class="container"><div class="line"><code>x.pop()          <span
                                        class="hljs-comment">// [ 2, 1, 3 ]</span></code></div></div><div
                                        class="container"><div class="line"><code>x.unshift( -<span class="hljs-number">1</span> )  <span
                                        class="hljs-comment">// [ -1, 2, 1, 3 ]</span></code></div></div><div
                                        class="container"><div class="line"><code>x.shift()        <span
                                        class="hljs-comment">// [ 2, 1, 3 ]</span></code></div></div><div
                                        class="container"><div class="line"><code>x.sort()         <span
                                        class="hljs-comment">// [ 1, 2, 3 ]</span></code></div></div><div
                                        class="container"><div class="line"><code>x.splice( <span
                                        class="hljs-number">1</span>, <span class="hljs-number">2</span> ) <span
                                        class="hljs-comment">// [ 2, 3 ]</span></code></div></div></pre>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>

                <p>Note: .unshift() method does not return a length property in Internet Explorer.
                </p>
                <h3 id="Boolean_Default_4"> Boolean Default </h3>
                <p>An array, no matter if it has elements or not, never defaults to false:
                </p>
                <div class="syntaxhighlighter javascript">
                    <table>
                        <tbody>
                        <tr>

                            <td class="gutter">

                                <div class="line n1">1</div>

                                <div class="line n2">2</div>

                            </td>

                            <td class="code">
                                <pre><div class="container"><div class="line"><code>![] <span class="hljs-comment">// false</span></code></div></div><div
                                        class="container"><div class="line"><code>!![] <span class="hljs-comment">// true</span></code></div></div></pre>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>

                <h3 id="Array.3CType.3E_Notation"> Array&lt;Type&gt; Notation </h3>
                <p>In the jQuery API you&apos;ll often find the notation of Array&lt;Type&gt;:
                </p>
                <pre>dragPrevention    Array&lt;String&gt;
</pre>
                <p>This indicates that the method doesn&apos;t only expect an array as the argument, but also specifies
                    the expected type. The notation is borrowed from Java 5&apos;s generics notation (or C++ templates).
                </p>
                <h2 id="ArrayLikeObject">Array-Like Object</h2>
                <p>Either a true JavaScript Array or a JavaScript Object that contains a nonnegative integer <code>length</code>
                    property and index properties from <code>0</code> up to <code>length - 1</code>. This latter case
                    includes array-like objects commonly encountered in web-based code such as the
                    <code>arguments</code> object and the <code>NodeList</code> object returned by many DOM methods.</p>
                <p>When a jQuery API accepts either plain Objects or Array-Like objects, a plain Object with a numeric
                    <code>length</code> property will trigger the Array-Like behavior.</p>
                <h2 id="PlainObject"> PlainObject </h2>
                <p>The PlainObject type is a JavaScript object containing zero or more key-value pairs. The plain object
                    is, in other words, an <code>Object</code> object. It is designated &quot;plain&quot; in jQuery
                    documentation to distinguish it from other kinds of JavaScript objects: for example,
                    <code>null</code>, user-defined arrays, and host objects such as <code>document</code>, all of which
                    have a <code>typeof</code> value of &quot;object.&quot; The <code><a
                            href="../jQuery.isPlainObject/">jQuery.isPlainObject()</a></code>
                    method identifies whether the passed argument is a plain object or not, as demonstrated below:
                </p>
                <div class="syntaxhighlighter javascript">
                    <table>
                        <tbody>
                        <tr>

                            <td class="gutter">

                                <div class="line n1">1</div>

                                <div class="line n2">2</div>

                                <div class="line n3">3</div>

                                <div class="line n4">4</div>

                                <div class="line n5">5</div>

                                <div class="line n6">6</div>

                                <div class="line n7">7</div>

                                <div class="line n8">8</div>

                                <div class="line n9">9</div>

                                <div class="line n10">10</div>

                                <div class="line n11">11</div>

                            </td>

                            <td class="code">
                                <pre><div class="container"><div class="line"><code>  <span
                                        class="hljs-keyword">var</span> a = [];</code></div></div><div
                                        class="container"><div class="line"><code>  <span
                                        class="hljs-keyword">var</span> d = <span class="hljs-built_in">document</span>;</code></div></div><div
                                        class="container"><div class="line"><code>  <span
                                        class="hljs-keyword">var</span> o = {};</code></div></div><div
                                        class="container"><div class="line"><code> </code></div></div><div
                                        class="container"><div class="line"><code>  <span
                                        class="hljs-keyword">typeof</span> a; <span
                                        class="hljs-comment">// object</span></code></div></div><div class="container"><div
                                        class="line"><code>  <span class="hljs-keyword">typeof</span> d; <span
                                        class="hljs-comment">// object</span></code></div></div><div class="container"><div
                                        class="line"><code>  <span class="hljs-keyword">typeof</span> o; <span
                                        class="hljs-comment">// object</span></code></div></div><div class="container"><div
                                        class="line"><code> </code></div></div><div class="container"><div class="line"><code>  jQuery.isPlainObject( a ); <span
                                        class="hljs-comment">// false</span></code></div></div><div class="container"><div
                                        class="line"><code>  jQuery.isPlainObject( d ); <span class="hljs-comment">// false</span></code></div></div><div
                                        class="container"><div class="line"><code>  jQuery.isPlainObject( o ); <span
                                        class="hljs-comment">// true</span></code></div></div></pre>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>


                <h2 id="Null">Null</h2>
                <p>The <code>null</code> keyword is a JavaScript literal that is commonly used to express the absence of
                    an intentional value.</p>

                <h2 id="Date"> Date </h2>
                <p>The Date type is a JavaScript object that represents a single moment in time. Date objects are
                    instantiated using their constructor function, which by default creates an object that represents
                    the current date and time.
                </p>
                <div class="syntaxhighlighter javascript">
                    <table>
                        <tbody>
                        <tr>

                            <td class="gutter">

                                <div class="line n1">1</div>

                            </td>

                            <td class="code">
                                <pre><div class="container"><div class="line"><code><span
                                        class="hljs-keyword">new</span> <span
                                        class="hljs-built_in">Date</span>();</code></div></div></pre>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>

                <p>To create a Date object for an alternative date and time, pass numeric arguments in the following
                    order: year, month, day, hour, minute, second, millisecond &#x2014; although note that the month is
                    zero-based, whereas the other arguments are one-based. The following creates a Date object
                    representing January 1st, 2014, at 8:15.
                </p>
                <div class="syntaxhighlighter javascript">
                    <table>
                        <tbody>
                        <tr>

                            <td class="gutter">

                                <div class="line n1">1</div>

                            </td>

                            <td class="code">
                                <pre><div class="container"><div class="line"><code><span
                                        class="hljs-keyword">new</span> <span class="hljs-built_in">Date</span>( <span
                                        class="hljs-number">2014</span>, <span class="hljs-number">0</span>, <span
                                        class="hljs-number">1</span>, <span class="hljs-number">8</span>, <span
                                        class="hljs-number">15</span> );</code></div></div></pre>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>


                <h2 id="Function"> Function </h2>
                <p>A function in JavaScript can be either named or anonymous. Any function can be assigned to a variable
                    or passed to a method, but passing member functions this way can cause them to be called in the
                    context of another object (i.e. with a different &quot;this&quot; object).
                </p>
                <div class="syntaxhighlighter javascript">
                    <table>
                        <tbody>
                        <tr>

                            <td class="gutter">

                                <div class="line n1">1</div>

                                <div class="line n2">2</div>

                            </td>

                            <td class="code">
                                <pre><div class="container"><div class="line"><code><span class="hljs-function"><span
                                        class="hljs-keyword">function</span> <span class="hljs-title">named</span>(<span
                                        class="hljs-params"></span>) </span>{}</code></div></div><div class="container"><div
                                        class="line"><code><span class="hljs-keyword">var</span> handler = <span
                                        class="hljs-function"><span class="hljs-keyword">function</span>(<span
                                        class="hljs-params"></span>) </span>{}</code></div></div></pre>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>

                <p>You see a lot of anonymous functions in jQuery code:
                </p>
                <div class="syntaxhighlighter javascript">
                    <table>
                        <tbody>
                        <tr>

                            <td class="gutter">

                                <div class="line n1">1</div>

                                <div class="line n2">2</div>

                                <div class="line n3">3</div>

                                <div class="line n4">4</div>

                                <div class="line n5">5</div>

                                <div class="line n6">6</div>

                            </td>

                            <td class="code">
                                <pre><div class="container"><div class="line"><code>$( <span class="hljs-built_in">document</span> ).ready(<span
                                        class="hljs-function"><span class="hljs-keyword">function</span>(<span
                                        class="hljs-params"></span>) </span>{});</code></div></div><div
                                        class="container"><div class="line"><code>$( <span class="hljs-string">&quot;a&quot;</span> ).click(<span
                                        class="hljs-function"><span class="hljs-keyword">function</span>(<span
                                        class="hljs-params"></span>) </span>{});</code></div></div><div
                                        class="container"><div class="line"><code>$.ajax({</code></div></div><div
                                        class="container"><div class="line"><code>  <span class="hljs-attr">url</span>: <span
                                        class="hljs-string">&quot;someurl.php&quot;</span>,</code></div></div><div
                                        class="container"><div class="line"><code>  <span
                                        class="hljs-attr">success</span>: <span class="hljs-function"><span
                                        class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{}</code></div></div><div
                                        class="container"><div class="line"><code>});</code></div></div></pre>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>

                <p>The type of a function is &quot;function&quot;.
                </p>
                <h3 id="Arguments"> Arguments </h3>
                <p>Inside a function a special variable &quot;arguments&quot; is always available. It&apos;s similar to
                    an array in that it has a length property, but it lacks the built-in methods of an array. The
                    elements of the pseudo-array are the argument of the function call.
                </p>
                <div class="syntaxhighlighter javascript">
                    <table>
                        <tbody>
                        <tr>

                            <td class="gutter">

                                <div class="line n1">1</div>

                                <div class="line n2">2</div>

                                <div class="line n3">3</div>

                                <div class="line n4">4</div>

                                <div class="line n5">5</div>

                                <div class="line n6">6</div>

                            </td>

                            <td class="code">
                                <pre><div class="container"><div class="line"><code><span class="hljs-function"><span
                                        class="hljs-keyword">function</span> <span class="hljs-title">log</span>(<span
                                        class="hljs-params"> x </span>) </span>{</code></div></div><div
                                        class="container"><div class="line"><code>  <span
                                        class="hljs-built_in">console</span>.log( <span
                                        class="hljs-keyword">typeof</span> x, <span
                                        class="hljs-built_in">arguments</span>.length );</code></div></div><div
                                        class="container"><div class="line"><code>}</code></div></div><div
                                        class="container"><div class="line"><code>log(); <span class="hljs-comment">// &quot;undefined&quot;, 0</span></code></div></div><div
                                        class="container"><div class="line"><code>log( <span
                                        class="hljs-number">1</span> ); <span class="hljs-comment">// &quot;number&quot;, 1</span></code></div></div><div
                                        class="container"><div class="line"><code>log( <span class="hljs-string">&quot;1&quot;</span>, <span
                                        class="hljs-string">&quot;2&quot;</span>, <span class="hljs-string">&quot;3&quot;</span> ); <span
                                        class="hljs-comment">// &quot;string&quot;, 3</span></code></div></div></pre>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>

                <p>The arguments object also has a callee property, which refers to the function you&apos;re inside of.
                    For instance:
                </p>
                <div class="syntaxhighlighter javascript">
                    <table>
                        <tbody>
                        <tr>

                            <td class="gutter">

                                <div class="line n1">1</div>

                                <div class="line n2">2</div>

                            </td>

                            <td class="code">
                                <pre><div class="container"><div class="line"><code><span
                                        class="hljs-keyword">var</span> awesome = <span class="hljs-function"><span
                                        class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{ <span
                                        class="hljs-keyword">return</span> <span class="hljs-built_in">arguments</span>.callee; }</code></div></div><div
                                        class="container"><div class="line"><code>awesome() === awesome <span
                                        class="hljs-comment">// true</span></code></div></div></pre>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>

                <h3 id="Context.2C_Call_and_Apply"> Context, Call and Apply </h3>
                <p>In JavaScript, the variable &quot;this&quot; always refers to the current context. By default, &quot;this&quot;
                    refers to the window object. Within a function this context can change, depending on how the
                    function is called.
                </p>
                <p>All event handlers in jQuery are called with the handling element as the context.
                </p>
                <div class="syntaxhighlighter javascript">
                    <table>
                        <tbody>
                        <tr>

                            <td class="gutter">

                                <div class="line n1">1</div>

                                <div class="line n2">2</div>

                                <div class="line n3">3</div>

                                <div class="line n4">4</div>

                                <div class="line n5">5</div>

                                <div class="line n6">6</div>

                            </td>

                            <td class="code">
                                <pre><div class="container"><div class="line"><code>$( <span class="hljs-built_in">document</span> ).ready(<span
                                        class="hljs-function"><span class="hljs-keyword">function</span>(<span
                                        class="hljs-params"></span>) </span>{</code></div></div><div class="container"><div
                                        class="line"><code>  <span class="hljs-comment">// this refers to window.document</span></code></div></div><div
                                        class="container"><div class="line"><code>});</code></div></div><div
                                        class="container"><div class="line"><code>$( <span class="hljs-string">&quot;a&quot;</span> ).click(<span
                                        class="hljs-function"><span class="hljs-keyword">function</span>(<span
                                        class="hljs-params"></span>) </span>{</code></div></div><div class="container"><div
                                        class="line"><code>  <span class="hljs-comment">// this refers to an anchor DOM element</span></code></div></div><div
                                        class="container"><div class="line"><code>});</code></div></div></pre>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>

                <p>You can specify the context for a function call using the function-built-in methods call and apply.
                    The difference between them is how they pass arguments. Call passes all arguments through as
                    arguments to the function, while apply accepts an array as the arguments.
                </p>
                <div class="syntaxhighlighter javascript">
                    <table>
                        <tbody>
                        <tr>

                            <td class="gutter">

                                <div class="line n1">1</div>

                                <div class="line n2">2</div>

                                <div class="line n3">3</div>

                                <div class="line n4">4</div>

                                <div class="line n5">5</div>

                                <div class="line n6">6</div>

                            </td>

                            <td class="code">
                                <pre><div class="container"><div class="line"><code><span class="hljs-function"><span
                                        class="hljs-keyword">function</span> <span class="hljs-title">scope</span>(<span
                                        class="hljs-params"></span>) </span>{</code></div></div><div class="container"><div
                                        class="line"><code>  <span class="hljs-built_in">console</span>.log( <span
                                        class="hljs-built_in">this</span>, <span class="hljs-built_in">arguments</span>.length );</code></div></div><div
                                        class="container"><div class="line"><code>}</code></div></div><div
                                        class="container"><div class="line"><code>scope() <span class="hljs-comment">// window, 0</span></code></div></div><div
                                        class="container"><div class="line"><code>scope.call( <span class="hljs-string">&quot;foobar&quot;</span>, [ <span
                                        class="hljs-number">1</span>, <span class="hljs-number">2</span> ] ); <span
                                        class="hljs-comment">// &quot;foobar&quot;, 1</span></code></div></div><div
                                        class="container"><div class="line"><code>scope.apply( <span
                                        class="hljs-string">&quot;foobar&quot;</span>, [ <span
                                        class="hljs-number">1</span>, <span class="hljs-number">2</span> ] ); <span
                                        class="hljs-comment">// &quot;foobar&quot;, 2</span></code></div></div></pre>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>

                <h3 id="Scope"> Scope </h3>
                <p>In JavaScript, all variables defined inside a function are only visible inside that function scope.
                    Consider the following example:
                </p>
                <div class="syntaxhighlighter javascript">
                    <table>
                        <tbody>
                        <tr>

                            <td class="gutter">

                                <div class="line n1">1</div>

                                <div class="line n2">2</div>

                                <div class="line n3">3</div>

                                <div class="line n4">4</div>

                                <div class="line n5">5</div>

                                <div class="line n6">6</div>

                                <div class="line n7">7</div>

                                <div class="line n8">8</div>

                            </td>

                            <td class="code">
                                <pre><div class="container"><div class="line"><code><span
                                        class="hljs-comment">// global</span></code></div></div><div class="container"><div
                                        class="line"><code><span class="hljs-keyword">var</span> x = <span
                                        class="hljs-number">0</span>;</code></div></div><div class="container"><div
                                        class="line"><code>(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span
                                        class="hljs-params"></span>) </span>{</code></div></div><div class="container"><div
                                        class="line"><code>  <span
                                        class="hljs-comment">// private</span></code></div></div><div class="container"><div
                                        class="line"><code>  <span class="hljs-keyword">var</span> x = <span
                                        class="hljs-number">1</span>;</code></div></div><div class="container"><div
                                        class="line"><code>  <span class="hljs-built_in">console</span>.log( x ); <span
                                        class="hljs-comment">// 1</span></code></div></div><div class="container"><div
                                        class="line"><code>})();</code></div></div><div class="container"><div
                                        class="line"><code><span class="hljs-built_in">console</span>.log( x ); <span
                                        class="hljs-comment">// 0</span></code></div></div></pre>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>

                <p>It defines a variable <i>x</i> in the global scope, then defines an anonymous function and executes
                    it immediately (the additional parentheses are required for immediate execution). Inside the
                    function another variable <i>x</i> is defined with a different value. It is only visible within that
                    function and doesn&apos;t overwrite the global variable.
                </p>
                <h3 id="Closures"> Closures </h3>
                <p>Closures are created whenever a variable that is defined outside the current scope is accessed from
                    within some inner scope. In the following example, the variable <i>counter</i> is visible within the
                    create, increment, and print functions, but not outside of them.
                </p>
                <div class="syntaxhighlighter javascript">
                    <table>
                        <tbody>
                        <tr>

                            <td class="gutter">

                                <div class="line n1">1</div>

                                <div class="line n2">2</div>

                                <div class="line n3">3</div>

                                <div class="line n4">4</div>

                                <div class="line n5">5</div>

                                <div class="line n6">6</div>

                                <div class="line n7">7</div>

                                <div class="line n8">8</div>

                                <div class="line n9">9</div>

                                <div class="line n10">10</div>

                                <div class="line n11">11</div>

                                <div class="line n12">12</div>

                                <div class="line n13">13</div>

                                <div class="line n14">14</div>

                            </td>

                            <td class="code">
                                <pre><div class="container"><div class="line"><code><span class="hljs-function"><span
                                        class="hljs-keyword">function</span> <span
                                        class="hljs-title">create</span>(<span
                                        class="hljs-params"></span>) </span>{</code></div></div><div class="container"><div
                                        class="line"><code>  <span class="hljs-keyword">var</span> counter = <span
                                        class="hljs-number">0</span>;</code></div></div><div class="container"><div
                                        class="line"><code>  <span
                                        class="hljs-keyword">return</span> {</code></div></div><div class="container"><div
                                        class="line"><code>    <span class="hljs-attr">increment</span>: <span
                                        class="hljs-function"><span class="hljs-keyword">function</span>(<span
                                        class="hljs-params"></span>) </span>{</code></div></div><div class="container"><div
                                        class="line"><code>      counter++;</code></div></div><div class="container"><div
                                        class="line"><code>    },</code></div></div><div class="container"><div
                                        class="line"><code>    <span class="hljs-attr">print</span>: <span
                                        class="hljs-function"><span class="hljs-keyword">function</span>(<span
                                        class="hljs-params"></span>) </span>{</code></div></div><div class="container"><div
                                        class="line"><code>      <span class="hljs-built_in">console</span>.log( counter );</code></div></div><div
                                        class="container"><div class="line"><code>    }</code></div></div><div
                                        class="container"><div class="line"><code>  }</code></div></div><div
                                        class="container"><div class="line"><code>}</code></div></div><div
                                        class="container"><div class="line"><code><span class="hljs-keyword">var</span> c = create();</code></div></div><div
                                        class="container"><div class="line"><code>c.increment();</code></div></div><div
                                        class="container"><div class="line"><code>c.print(); <span class="hljs-comment">// 1</span></code></div></div></pre>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>

                <p>The pattern allows you to create objects with methods that operate on data that isn&apos;t visible to
                    the outside&#x2014;the very basis of object-oriented programming.
                </p>
                <h3 id="Proxy_Pattern"> Proxy Pattern </h3>
                <p>Combining the above knowledge gives you as a JavaScript developer quite a lot of power. One way to
                    combine that is to implement a proxy pattern in JavaScript, enabling the basics of aspect-oriented
                    programming (AOP):
                </p>
                <div class="syntaxhighlighter javascript">
                    <table>
                        <tbody>
                        <tr>

                            <td class="gutter">

                                <div class="line n1">1</div>

                                <div class="line n2">2</div>

                                <div class="line n3">3</div>

                                <div class="line n4">4</div>

                                <div class="line n5">5</div>

                                <div class="line n6">6</div>

                                <div class="line n7">7</div>

                                <div class="line n8">8</div>

                            </td>

                            <td class="code">
                                <pre><div class="container"><div class="line"><code>(<span class="hljs-function"><span
                                        class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{</code></div></div><div
                                        class="container"><div class="line"><code>  <span class="hljs-comment">// log all calls to setArray</span></code></div></div><div
                                        class="container"><div class="line"><code>  <span
                                        class="hljs-keyword">var</span> proxied = jQuery.fn.setArray;</code></div></div><div
                                        class="container"><div class="line"><code>  jQuery.fn.setArray = <span
                                        class="hljs-function"><span class="hljs-keyword">function</span>(<span
                                        class="hljs-params"></span>) </span>{</code></div></div><div class="container"><div
                                        class="line"><code>    <span class="hljs-built_in">console</span>.log( <span
                                        class="hljs-built_in">this</span>, <span class="hljs-built_in">arguments</span> );</code></div></div><div
                                        class="container"><div class="line"><code>    <span
                                        class="hljs-keyword">return</span> proxied.apply( <span class="hljs-built_in">this</span>, <span
                                        class="hljs-built_in">arguments</span> );</code></div></div><div
                                        class="container"><div class="line"><code>  };</code></div></div><div
                                        class="container"><div class="line"><code>})();</code></div></div></pre>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>

                <p>The above wraps its code in a function to hide the &quot;proxied&quot;-variable. It saves jQuery&apos;s
                    setArray-method in a closure and overwrites it. The proxy then logs all calls to the method and
                    delegates the call to the original. Using apply(this, arguments) guarantees that the caller won&apos;t
                    be able to notice the difference between the original and the proxied method.
                </p>
                <h2 id="Callback"> Callback </h2>
                <p>A callback is a plain JavaScript function passed to some method as an argument or option. Some
                    callbacks are just events, called to give the user a chance to react when a certain state is
                    triggered. jQuery&apos;s event system uses such callbacks everywhere:
                </p>
                <div class="syntaxhighlighter javascript">
                    <table>
                        <tbody>
                        <tr>

                            <td class="gutter">

                                <div class="line n1">1</div>

                                <div class="line n2">2</div>

                                <div class="line n3">3</div>

                            </td>

                            <td class="code">
                                <pre><div class="container"><div class="line"><code>$( <span class="hljs-string">&quot;body&quot;</span> ).click(<span
                                        class="hljs-function"><span class="hljs-keyword">function</span>(<span
                                        class="hljs-params"> event </span>) </span>{</code></div></div><div
                                        class="container"><div class="line"><code>  <span
                                        class="hljs-built_in">console</span>.log( <span class="hljs-string">&quot;clicked: &quot;</span> + event.target );</code></div></div><div
                                        class="container"><div class="line"><code>});</code></div></div></pre>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>

                <p>Most callbacks provide arguments and a context. In the event-handler example, the callback is called
                    with one argument, an Event. The context is set to the handling element, in the above example,
                    document.body.
                </p>
                <p>Some callbacks are required to return something, others make that return value optional. To prevent a
                    form submission, a submit event handler can return false:
                </p>
                <div class="syntaxhighlighter javascript">
                    <table>
                        <tbody>
                        <tr>

                            <td class="gutter">

                                <div class="line n1">1</div>

                                <div class="line n2">2</div>

                                <div class="line n3">3</div>

                            </td>

                            <td class="code">
                                <pre><div class="container"><div class="line"><code>$( <span class="hljs-string">&quot;#myform&quot;</span> ).submit(<span
                                        class="hljs-function"><span class="hljs-keyword">function</span>(<span
                                        class="hljs-params"></span>) </span>{</code></div></div><div class="container"><div
                                        class="line"><code>  <span class="hljs-keyword">return</span> <span
                                        class="hljs-literal">false</span>;</code></div></div><div class="container"><div
                                        class="line"><code>});</code></div></div></pre>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>

                <p>Instead of always returning false, the callback could check fields of the form for validity, and
                    return false only when the form is invalid.
                </p>
                <h2 id="Error"> Error </h2>
                <p>An instance of an Error object is thrown as an exception when a runtime error occurs. Error can also
                    be used as base to define user custom exception classes. In JavaScript an error can be thrown as
                    shown below:
                </p>
                <div class="syntaxhighlighter javascript">
                    <table>
                        <tbody>
                        <tr>

                            <td class="gutter">

                                <div class="line n1">1</div>

                            </td>

                            <td class="code">
                                <pre><div class="container"><div class="line"><code><span
                                        class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span
                                        class="hljs-built_in">Error</span>( <span class="hljs-string">&quot;The argument provided is incorrect&quot;</span> );</code></div></div></pre>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>

                <p>An error can also be thrown by the engine under some circumstances. For example, when trying to
                    access a property of <code>null</code>:
                </p>
                <div class="syntaxhighlighter javascript">
                    <table>
                        <tbody>
                        <tr>

                            <td class="gutter">

                                <div class="line n1">1</div>

                                <div class="line n2">2</div>

                            </td>

                            <td class="code">
                                <pre><div class="container"><div class="line"><code><span
                                        class="hljs-keyword">var</span> obj = <span
                                        class="hljs-literal">null</span>;</code></div></div><div class="container"><div
                                        class="line"><code><span class="hljs-built_in">console</span>.log( obj.foo() );</code></div></div></pre>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>

                <h2 id="Selector"> Selector </h2>
                <p>A selector is used in jQuery to select DOM elements from a DOM document. That document is, in most
                    cases, the DOM document present in all browsers, but can also be an XML document received via Ajax.
                </p>
                <p>The selectors are a composition of CSS and custom additions. All selectors available in jQuery are
                    documented on the <a href="../category/selectors/" title="Selectors">Selectors API page</a>.
                </p>
                <p>There are lot of plugins that leverage jQuery&apos;s selectors in other ways. The validation plugin
                    accepts a selector to specify a dependency, whether an input is required or not:
                </p>
                <div class="syntaxhighlighter javascript">
                    <table>
                        <tbody>
                        <tr>

                            <td class="gutter">

                                <div class="line n1">1</div>

                                <div class="line n2">2</div>

                                <div class="line n3">3</div>

                            </td>

                            <td class="code">
                                <pre><div class="container"><div class="line"><code>emailrules: {</code></div></div><div
                                        class="container"><div class="line"><code>  <span
                                        class="hljs-attr">required</span>: <span class="hljs-string">&quot;#email:filled&quot;</span></code></div></div><div
                                        class="container"><div class="line"><code>}</code></div></div></pre>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>

                <p>This would make a checkbox with name &quot;emailrules&quot; required only if the user entered an
                    email address in the email field, selected via its id, filtered via a custom selector &quot;:filled&quot;
                    that the validation plugin provides.
                </p>
                <p>If Selector is specified as the type of an argument, it accepts everything that the jQuery
                    constructor accepts, eg. Strings, Elements, Lists of Elements.
                </p>
                <h2 id="Event">Event</h2>
                <p>jQuery&apos;s event system normalizes the event object according to W3C standards. The event object
                    is guaranteed to be passed to the event handler (no checks for window.event required). It normalizes
                    the target, relatedTarget, which, metaKey and pageX/Y properties and provides both stopPropagation()
                    and preventDefault() methods.
                </p>
                <p>Those properties are all documented, and accompanied by examples, on the <a
                        href="../category/events/event-object/" title="Events">Event object</a> page.
                </p>
                <p>The standard events in the Document Object Model are: <code>blur</code>, <code>focus</code>, <code>load</code>,
                    <code>resize</code>, <code>scroll</code>, <code>unload</code>, <code>beforeunload</code>, <code>click</code>,
                    <code>dblclick</code>, <code>mousedown</code>, <code>mouseup</code>, <code>mousemove</code>, <code>mouseover</code>,
                    <code>mouseout</code>, <code>mouseenter</code>, <code>mouseleave</code>, <code>change</code>, <code>select</code>,
                    <code>submit</code>, <code>keydown</code>, <code>keypress,</code> and <code>keyup</code>. Since the
                    DOM event names have predefined meanings for some elements, using them for other purposes is not
                    recommended. jQuery&apos;s event model can trigger an event by any name on an element, and it is
                    propagated up the DOM tree to which that element belongs, if any.
                </p>
                <h2 id="Element"> Element </h2>
                <p>An element in the Document Object Model (DOM) can have attributes, text, and children. It provides
                    methods to traverse the parent and children and to get access to its attributes. Due to
                    inconsistencies in DOM API specifications and implementations, however, those methods can be a
                    challenge to use. jQuery provides a &quot;wrapper&quot; around those elements to help interacting
                    with the DOM. But sometimes you will be working directly with DOM elements, or see methods that
                    (also) accept DOM elements as arguments.
                </p>
                <p>Whenever you call jQuery&apos;s <code>.each()</code> method or one of its event methods on a jQuery
                    collection, the context of the callback function &#x2014; <code>this</code> &#x2014; is set to a DOM
                    element.
                </p>
                <p>Some properties of DOM elements are quite consistent among browsers. Consider this example of a
                    simple onblur validation:
                </p>
                <div class="syntaxhighlighter javascript">
                    <table>
                        <tbody>
                        <tr>

                            <td class="gutter">

                                <div class="line n1">1</div>

                                <div class="line n2">2</div>

                                <div class="line n3">3</div>

                                <div class="line n4">4</div>

                                <div class="line n5">5</div>

                            </td>

                            <td class="code">
                                <pre><div class="container"><div class="line"><code>$( <span class="hljs-string">&quot;input[type=&apos;text&apos;]&quot;</span> ).on( <span
                                        class="hljs-string">&quot;blur&quot;</span>, <span class="hljs-function"><span
                                        class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{</code></div></div><div
                                        class="container"><div class="line"><code>  <span class="hljs-keyword">if</span>( !<span
                                        class="hljs-built_in">this</span>.value ) {</code></div></div><div
                                        class="container"><div class="line"><code>    alert( <span class="hljs-string">&quot;Please enter some text!&quot;</span> );</code></div></div><div
                                        class="container"><div class="line"><code>  }</code></div></div><div
                                        class="container"><div class="line"><code>});</code></div></div></pre>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>

                <p>You could replace <code>this.value</code> with <code>$(this).val()</code> to access the value of the
                    text input via jQuery, but in that case you wouldn&apos;t gain anything.
                </p>
                <h2 id="Text"> Text </h2>
                <p>Text is a node of the Document Object Model (DOM) that represents the textual content of an <a
                        href="#Element">element</a> or an attribute. Consider the following code:
                </p>
                <div class="syntaxhighlighter xml">
                    <table>
                        <tbody>
                        <tr>

                            <td class="gutter">

                                <div class="line n1">1</div>

                            </td>

                            <td class="code">
                                <pre><div class="container"><div class="line"><code><span class="hljs-tag">&lt;<span
                                        class="hljs-name">p</span> <span class="hljs-attr">id</span>=<span
                                        class="hljs-string">&quot;target&quot;</span>&gt;</span><span class="hljs-tag">&lt;<span
                                        class="hljs-name">b</span>&gt;</span>Hello<span class="hljs-tag">&lt;/<span
                                        class="hljs-name">b</span>&gt;</span> world<span class="hljs-tag">&lt;/<span
                                        class="hljs-name">p</span>&gt;</span></code></div></div></pre>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>

                <p>If you retrieve the children of the paragraph of the example as follows:
                </p>
                <div class="syntaxhighlighter javascript">
                    <table>
                        <tbody>
                        <tr>

                            <td class="gutter">

                                <div class="line n1">1</div>

                            </td>

                            <td class="code">
                                <pre><div class="container"><div class="line"><code><span
                                        class="hljs-keyword">var</span> children = <span
                                        class="hljs-built_in">document</span>.getElementById( <span class="hljs-string">&quot;target&quot;</span> ).childNodes;</code></div></div></pre>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>

                <p>you obtain two children. The first one is the <a href="#Element">element</a> representing the
                    <code>b</code> tag. The second child is a text node containing the string &quot; world&quot;.
                </p>
                <h2 id="jQuery"> jQuery </h2>
                <p>A jQuery object contains a collection of Document Object Model (DOM) elements that have been created
                    from an HTML string or selected from a document. Since jQuery methods often use CSS selectors to
                    match elements from a document, the set of elements in a jQuery object is often called a set of
                    &quot;matched elements&quot; or &quot;selected elements&quot;.
                </p>
                <p>The jQuery object itself behaves much like an array; it has a <code>length</code> property and the
                    elements in the object can be accessed by their numeric indices <code>[0]</code> to
                    <code>[length-1]</code>. Note that a jQuery object is not actually a Javascript Array object, so it
                    does not have all the methods of a true Array object such as <code>join()</code>.
                </p>
                <p>Most frequently, you will use the jQuery() function to create a jQuery object. <code>jQuery()</code>
                    can also be accessed by its familiar single-character alias of <code>$()</code>, unless you have
                    called <code>jQuery.noConflict()</code> to disable this option. Many jQuery methods return the
                    jQuery object itself, so that method calls can be chained:
                </p>
                <p>In API calls that return <code>jQuery</code>, the value returned will be the original jQuery object
                    unless otherwise documented by that API. API methods such as <code>.filter()</code> or
                    <code>.not()</code> modify their incoming set and thus return a new jQuery object.
                </p>
                <div class="syntaxhighlighter javascript">
                    <table>
                        <tbody>
                        <tr>

                            <td class="gutter">

                                <div class="line n1">1</div>

                            </td>

                            <td class="code">
                                <pre><div class="container"><div class="line"><code>$( <span class="hljs-string">&quot;p&quot;</span> ).css( <span
                                        class="hljs-string">&quot;color&quot;</span>, <span class="hljs-string">&quot;red&quot;</span> ).find( <span
                                        class="hljs-string">&quot;.special&quot;</span> ).css( <span
                                        class="hljs-string">&quot;color&quot;</span>, <span class="hljs-string">&quot;green&quot;</span> );</code></div></div></pre>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>

                <p>Whenever you use a &quot;destructive&quot; jQuery method that potentially changes the set of elements
                    in the jQuery object, such as <code>.filter()</code> or <code>.find()</code>, that method actually
                    returns a new jQuery object with the resulting elements. To return to the previous jQuery object,
                    you use the <code>.end()</code> method.
                </p>
                <p>A jQuery object may be empty, containing no DOM elements. You can create an empty jQuery object with
                    <code>$()</code> (that is, passing no arguments at all). A jQuery object may also be empty if a
                    selector doesn&apos;t select any elements, or if a chained method filters out all the elements. It
                    is not an error; any further methods called on that jQuery object simply have no effect since they
                    have no elements to act upon. So, in this example if there are no bad entries on the page then no
                    elements will be colored red:
                </p>
                <div class="syntaxhighlighter javascript">
                    <table>
                        <tbody>
                        <tr>

                            <td class="gutter">

                                <div class="line n1">1</div>

                            </td>

                            <td class="code">
                                <pre><div class="container"><div class="line"><code>$( <span class="hljs-string">&quot;.badEntry&quot;</span> ).css({ <span
                                        class="hljs-attr">color</span>: <span class="hljs-string">&quot;red&quot;</span> });</code></div></div></pre>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>

                <h2 id="XMLHttpRequest"> XMLHttpRequest </h2>
                <p>Some of jQuery&apos;s Ajax functions return the native XMLHttpRequest (XHR) object, or pass it as an
                    argument to success/error/complete handlers, so that you can do additional processing or monitoring
                    on the request. Note that Ajax functions only return or pass an XHR object when an XHR object is
                    actually used in the request. For example, JSONP requests and cross-domain GET requests use a script
                    element rather than an XHR object.
                </p>
                <p>Although the XHR object is a standard, there are variations in its behavior on different browsers.
                    Refer to the WHATWG site and Mozilla Developer Network for more information:
                </p>
                <ul>
                    <li><a href="https://xhr.spec.whatwg.org/" class="external text"
                           title="https://xhr.spec.whatwg.org/">WHATWG living standard</a>
                    </li>
                    <li><a href="https://developer.mozilla.org/docs/DOM/XMLHttpRequest" class="external text"
                           title="https://developer.mozilla.org/docs/DOM/XMLHttpRequest">Mozilla Developer Network</a>
                    </li>
                </ul>
                <h2 id="jqXHR"> jqXHR </h2>
                <p>As of jQuery 1.5, the <a href="../jQuery.ajax/">$.ajax()</a> method returns the jqXHR object, which
                    is
                    a superset of the XMLHTTPRequest object. For more information, see the <a
                            href="../jQuery.ajax/index.html#jqXHR">jqXHR section of the $.ajax entry</a>
                </p>
                <h2 id="Thenable">Thenable</h2>
                <p>Any object that has a <code>then</code> method.</p>
                <h2 id="Deferred"> Deferred Object</h2>
                <p>As of jQuery 1.5, the <a href="../category/deferred-object/">Deferred</a> object provides a way to
                    register multiple callbacks into self-managed callback queues, invoke callback queues as
                    appropriate, and relay the success or failure state of any synchronous or asynchronous function.
                </p>
                <h2 id="Promise"> Promise Object</h2>
                <p>This object provides a subset of the methods of the <a
                        href="../category/deferred-object/">Deferred</a>
                    object (<a href="../deferred.then/"><code>then</code></a>, <a
                            href="../deferred.done/"><code>done</code></a>,
                    <a href="../deferred.fail/"><code>fail</code></a>, <a href="../deferred.always/"><code>always</code></a>,
                    <a href="../deferred.pipe/"><code>pipe</code></a>, <a
                            href="../deferred.progress/"><code>progress</code></a>,
                    <a href="../deferred.state/"><code>state</code></a> and <a
                            href="../deferred.promise/"><code>promise</code></a>) to prevent users from changing the
                    state
                    of the Deferred.
                </p>
                <h2 id="Callbacks">Callbacks Object</h2>
                <p>A multi-purpose object that provides a powerful way to manage callback lists. It supports adding,
                    removing, firing, and disabling callbacks. The Callbacks object is created and returned by the
                    <code>$.Callbacks</code> function and subsequently returned by most of that function&apos;s methods.
                </p>
                <h2 id="Document">Document</h2>
                <p>A document object created by the browser&apos;s DOM parser, usually from a string representing HTML
                    or XML.</p>
                <h2 id="XMLDocument">XML Document</h2>
                <p>A document object created by the browser&apos;s XML DOM parser, usually from a string representing
                    XML. XML documents have different semantics than HTML documents, but most of the traversing and
                    manipulation methods provided by jQuery will work with them.</p>
                <h2 id="Assert">Assert</h2>
                <p>A reference to or instance of the object holding all of QUnit&apos;s assertions. See the <a
                        href="https://api.qunitjs.com/config/QUnit.assert">API documentation for
                    <code>QUnit.assert</code></a> for details.</p></div>
            <div id="sidebar" class="widget-area" role="complementary">
                <aside id="categories" class="widget">
                    <ul>
                        <li class="cat-item cat-item-1"><a href="../category/ajax/">Ajax</a>
                            <ul class='children'>
                                <li class="cat-item cat-item-2"><a
                                        href="../category/ajax/global-ajax-event-handlers/">Global Ajax
                                    Event Handlers</a>
                                </li>
                                <li class="cat-item cat-item-3"><a
                                        href="../category/ajax/helper-functions/">Helper Functions</a>
                                </li>
                                <li class="cat-item cat-item-4"><a
                                        href="../category/ajax/low-level-interface/">Low-Level
                                    Interface</a>
                                </li>
                                <li class="cat-item cat-item-5"><a
                                        href="../category/ajax/shorthand-methods/">Shorthand Methods</a>
                                </li>
                            </ul>
                        </li>
                        <li class="cat-item cat-item-6"><a href="../category/attributes/">Attributes</a>
                        </li>
                        <li class="cat-item cat-item-7"><a href="../category/callbacks-object/">Callbacks
                            Object</a>
                        </li>
                        <li class="cat-item cat-item-8"><a href="../category/core/">Core</a>
                        </li>
                        <li class="cat-item cat-item-9"><a href="../category/css/">CSS</a>
                        </li>
                        <li class="cat-item cat-item-10"><a href="../category/data/">Data</a>
                        </li>
                        <li class="cat-item cat-item-11"><a href="../category/deferred-object/">Deferred
                            Object</a>
                        </li>
                        <li class="cat-item cat-item-87"><a href="../category/deprecated/">Deprecated</a>
                            <ul class='children'>
                                <li class="cat-item cat-item-90"><a
                                        href="../category/deprecated/deprecated-1.3/">Deprecated 1.3</a>
                                </li>
                                <li class="cat-item cat-item-88"><a
                                        href="../category/deprecated/deprecated-1.7/">Deprecated 1.7</a>
                                </li>
                                <li class="cat-item cat-item-89"><a
                                        href="../category/deprecated/deprecated-1.8/">Deprecated 1.8</a>
                                </li>
                                <li class="cat-item cat-item-94"><a
                                        href="../category/deprecated/deprecated-1.9/">Deprecated 1.9</a>
                                </li>
                                <li class="cat-item cat-item-93"><a
                                        href="../category/deprecated/deprecated-1.10/">Deprecated 1.10</a>
                                </li>
                                <li class="cat-item cat-item-98"><a
                                        href="../category/deprecated/deprecated-3.0/">Deprecated 3.0</a>
                                </li>
                                <li class="cat-item cat-item-101"><a
                                        href="../category/deprecated/deprecated-3.2/">Deprecated 3.2</a>
                                </li>
                                <li class="cat-item cat-item-99"><a
                                        href="../category/deprecated/deprecated-3.3/">Deprecated 3.3</a>
                                </li>
                                <li class="cat-item cat-item-100"><a
                                        href="../category/deprecated/deprecated-3.4/">Deprecated 3.4</a>
                                </li>
                                <li class="cat-item cat-item-102"><a
                                        href="../category/deprecated/deprecated-3.5/">Deprecated 3.5</a>
                                </li>
                            </ul>
                        </li>
                        <li class="cat-item cat-item-12"><a href="../category/dimensions/">Dimensions</a>
                        </li>
                        <li class="cat-item cat-item-13"><a href="../category/effects/">Effects</a>
                            <ul class='children'>
                                <li class="cat-item cat-item-14"><a href="../category/effects/basics/">Basics</a>
                                </li>
                                <li class="cat-item cat-item-15"><a
                                        href="../category/effects/custom-effects/">Custom</a>
                                </li>
                                <li class="cat-item cat-item-16"><a href="../category/effects/fading/">Fading</a>
                                </li>
                                <li class="cat-item cat-item-17"><a href="../category/effects/sliding/">Sliding</a>
                                </li>
                            </ul>
                        </li>
                        <li class="cat-item cat-item-18"><a href="../category/events/">Events</a>
                            <ul class='children'>
                                <li class="cat-item cat-item-19"><a
                                        href="../category/events/browser-events/">Browser Events</a>
                                </li>
                                <li class="cat-item cat-item-20"><a
                                        href="../category/events/document-loading/">Document Loading</a>
                                </li>
                                <li class="cat-item cat-item-21"><a
                                        href="../category/events/event-handler-attachment/">Event Handler
                                    Attachment</a>
                                </li>
                                <li class="cat-item cat-item-22"><a
                                        href="../category/events/event-object/">Event Object</a>
                                </li>
                                <li class="cat-item cat-item-23"><a
                                        href="../category/events/form-events/">Form Events</a>
                                </li>
                                <li class="cat-item cat-item-24"><a
                                        href="../category/events/keyboard-events/">Keyboard Events</a>
                                </li>
                                <li class="cat-item cat-item-25"><a
                                        href="../category/events/mouse-events/">Mouse Events</a>
                                </li>
                            </ul>
                        </li>
                        <li class="cat-item cat-item-26"><a href="../category/forms/">Forms</a>
                        </li>
                        <li class="cat-item cat-item-27"><a href="../category/internals/">Internals</a>
                        </li>
                        <li class="cat-item cat-item-28"><a
                                href="../category/manipulation/">Manipulation</a>
                            <ul class='children'>
                                <li class="cat-item cat-item-29"><a
                                        href="../category/manipulation/class-attribute/">Class
                                    Attribute</a>
                                </li>
                                <li class="cat-item cat-item-30"><a
                                        href="../category/manipulation/copying/">Copying</a>
                                </li>
                                <li class="cat-item cat-item-32"><a
                                        href="../category/manipulation/dom-insertion-around/">DOM
                                    Insertion, Around</a>
                                </li>
                                <li class="cat-item cat-item-33"><a
                                        href="../category/manipulation/dom-insertion-inside/">DOM
                                    Insertion, Inside</a>
                                </li>
                                <li class="cat-item cat-item-34"><a
                                        href="../category/manipulation/dom-insertion-outside/">DOM
                                    Insertion, Outside</a>
                                </li>
                                <li class="cat-item cat-item-35"><a
                                        href="../category/manipulation/dom-removal/">DOM Removal</a>
                                </li>
                                <li class="cat-item cat-item-36"><a
                                        href="../category/manipulation/dom-replacement/">DOM
                                    Replacement</a>
                                </li>
                                <li class="cat-item cat-item-37"><a
                                        href="../category/manipulation/general-attributes/">General
                                    Attributes</a>
                                </li>
                                <li class="cat-item cat-item-38"><a
                                        href="../category/manipulation/style-properties/">Style
                                    Properties</a>
                                </li>
                            </ul>
                        </li>
                        <li class="cat-item cat-item-39"><a href="../category/miscellaneous/">Miscellaneous</a>
                            <ul class='children'>
                                <li class="cat-item cat-item-40"><a
                                        href="../category/miscellaneous/collection-manipulation/">Collection
                                    Manipulation</a>
                                </li>
                                <li class="cat-item cat-item-41"><a
                                        href="../category/miscellaneous/data-storage/">Data Storage</a>
                                </li>
                                <li class="cat-item cat-item-42"><a
                                        href="../category/miscellaneous/dom-element-methods/">DOM Element
                                    Methods</a>
                                </li>
                                <li class="cat-item cat-item-43"><a
                                        href="../category/miscellaneous/setup-methods/">Setup Methods</a>
                                </li>
                            </ul>
                        </li>
                        <li class="cat-item cat-item-44"><a href="../category/offset/">Offset</a>
                        </li>
                        <li class="cat-item cat-item-45"><a href="../category/properties/">Properties</a>
                            <ul class='children'>
                                <li class="cat-item cat-item-46"><a
                                        href="../category/properties/jquery-object-instance-properties/">Properties
                                    of jQuery Object Instances</a>
                                </li>
                                <li class="cat-item cat-item-47"><a
                                        href="../category/properties/global-jquery-object-properties/">Properties
                                    of the Global jQuery Object</a>
                                </li>
                            </ul>
                        </li>
                        <li class="cat-item cat-item-92"><a href="../category/removed/">Removed</a>
                        </li>
                        <li class="cat-item cat-item-48"><a href="../category/selectors/">Selectors</a>
                            <ul class='children'>
                                <li class="cat-item cat-item-49"><a
                                        href="../category/selectors/attribute-selectors/">Attribute</a>
                                </li>
                                <li class="cat-item cat-item-50"><a
                                        href="../category/selectors/basic-css-selectors/">Basic</a>
                                </li>
                                <li class="cat-item cat-item-51"><a
                                        href="../category/selectors/basic-filter-selectors/">Basic
                                    Filter</a>
                                </li>
                                <li class="cat-item cat-item-52"><a
                                        href="../category/selectors/child-filter-selectors/">Child
                                    Filter</a>
                                </li>
                                <li class="cat-item cat-item-53"><a
                                        href="../category/selectors/content-filter-selector/">Content
                                    Filter</a>
                                </li>
                                <li class="cat-item cat-item-54"><a
                                        href="../category/selectors/form-selectors/">Form</a>
                                </li>
                                <li class="cat-item cat-item-55"><a
                                        href="../category/selectors/hierarchy-selectors/">Hierarchy</a>
                                </li>
                                <li class="cat-item cat-item-56"><a
                                        href="../category/selectors/jquery-selector-extensions/">jQuery
                                    Extensions</a>
                                </li>
                                <li class="cat-item cat-item-57"><a
                                        href="../category/selectors/visibility-filter-selectors/">Visibility
                                    Filter</a>
                                </li>
                            </ul>
                        </li>
                        <li class="cat-item cat-item-58"><a href="../category/traversing/">Traversing</a>
                            <ul class='children'>
                                <li class="cat-item cat-item-59"><a
                                        href="../category/traversing/filtering/">Filtering</a>
                                </li>
                                <li class="cat-item cat-item-60"><a
                                        href="../category/traversing/miscellaneous-traversal/">Miscellaneous
                                    Traversing</a>
                                </li>
                                <li class="cat-item cat-item-61"><a
                                        href="../category/traversing/tree-traversal/">Tree Traversal</a>
                                </li>
                            </ul>
                        </li>
                        <li class="cat-item cat-item-63"><a href="../category/utilities/">Utilities</a>
                        </li>
                        <li class="cat-item cat-item-64"><a href="../category/version/">Version</a>
                            <ul class='children'>
                                <li class="cat-item cat-item-65"><a href="../category/version/1.0/">Version
                                    1.0</a>
                                </li>
                                <li class="cat-item cat-item-66"><a href="../category/version/1.0.4/">Version
                                    1.0.4</a>
                                </li>
                                <li class="cat-item cat-item-67"><a href="../category/version/1.1/">Version
                                    1.1</a>
                                </li>
                                <li class="cat-item cat-item-68"><a href="../category/version/1.1.2/">Version
                                    1.1.2</a>
                                </li>
                                <li class="cat-item cat-item-69"><a href="../category/version/1.1.3/">Version
                                    1.1.3</a>
                                </li>
                                <li class="cat-item cat-item-70"><a href="../category/version/1.1.4/">Version
                                    1.1.4</a>
                                </li>
                                <li class="cat-item cat-item-71"><a href="../category/version/1.2/">Version
                                    1.2</a>
                                </li>
                                <li class="cat-item cat-item-72"><a href="../category/version/1.2.3/">Version
                                    1.2.3</a>
                                </li>
                                <li class="cat-item cat-item-73"><a href="../category/version/1.2.6/">Version
                                    1.2.6</a>
                                </li>
                                <li class="cat-item cat-item-74"><a href="../category/version/1.3/">Version
                                    1.3</a>
                                </li>
                                <li class="cat-item cat-item-75"><a href="../category/version/1.4/">Version
                                    1.4</a>
                                </li>
                                <li class="cat-item cat-item-76"><a href="../category/version/1.4.1/">Version
                                    1.4.1</a>
                                </li>
                                <li class="cat-item cat-item-77"><a href="../category/version/1.4.2/">Version
                                    1.4.2</a>
                                </li>
                                <li class="cat-item cat-item-78"><a href="../category/version/1.4.3/">Version
                                    1.4.3</a>
                                </li>
                                <li class="cat-item cat-item-79"><a href="../category/version/1.4.4/">Version
                                    1.4.4</a>
                                </li>
                                <li class="cat-item cat-item-80"><a href="../category/version/1.5/">Version
                                    1.5</a>
                                </li>
                                <li class="cat-item cat-item-81"><a href="../category/version/1.5.1/">Version
                                    1.5.1</a>
                                </li>
                                <li class="cat-item cat-item-82"><a href="../category/version/1.6/">Version
                                    1.6</a>
                                </li>
                                <li class="cat-item cat-item-83"><a href="../category/version/1.7/">Version
                                    1.7</a>
                                </li>
                                <li class="cat-item cat-item-84"><a href="../category/version/1.8/">Version
                                    1.8</a>
                                </li>
                                <li class="cat-item cat-item-86"><a href="../category/version/1.9/">Version
                                    1.9</a>
                                </li>
                                <li class="cat-item cat-item-103"><a
                                        href="../category/version/1.12-and-2.2/">Version 1.12 &amp;
                                    2.2</a>
                                </li>
                                <li class="cat-item cat-item-95"><a href="../category/version/3.0/">Version
                                    3.0</a>
                                </li>
                                <li class="cat-item cat-item-96"><a href="../category/version/3.1/">Version
                                    3.1</a>
                                </li>
                                <li class="cat-item cat-item-104"><a href="../category/version/3.2/">Version
                                    3.2</a>
                                </li>
                                <li class="cat-item cat-item-105"><a href="../category/version/3.3/">Version
                                    3.3</a>
                                </li>
                                <li class="cat-item cat-item-106"><a href="../category/version/3.4/">Version
                                    3.4</a>
                                </li>
                                <li class="cat-item cat-item-107"><a href="../category/version/3.5/">Version
                                    3.5</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </aside>
            </div>
        </div>

    </div>
</div>

<footer class="clearfix simple">
    <div class="constrain">
        <div class="row">
            <div class="six columns offset-by-three">
                <h3><span>Books</span></h3>
                <ul class="books">
                    <li>
                        <a href="https://www.packtpub.com/web-development/learning-jquery-fourth-edition">
                            <img src="../../jquery-wp-content/themes/jquery/content/books/learning-jquery-4th-ed.jpg"
                                 alt="Learning jQuery 4th Edition by Karl Swedberg and Jonathan Chaffer" width="92"
                                 height="114">
                            Learning jQuery Fourth Edition
                            <cite>Karl Swedberg and Jonathan Chaffer</cite>
                        </a>
                    </li>
                    <li>
                        <a href="https://www.manning.com/books/jquery-in-action-third-edition">
                            <img src="../../jquery-wp-content/themes/jquery/content/books/jquery-in-action.jpg"
                                 alt="jQuery in Action by Bear Bibeault, Yehuda Katz, and Aurelio De Rosa" width="150"
                                 height="188">
                            jQuery in Action
                            <cite>Bear Bibeault, Yehuda Katz, and Aurelio De Rosa</cite>
                        </a>
                    </li>
                    <li>
                        <a href="https://www.syncfusion.com/ebooks/jquery">
                            <img src="../../jquery-wp-content/themes/jquery/content/books/jquery-succinctly.jpg"
                                 alt="jQuery Succinctly by Cody Lindley" width="124" height="166">
                            jQuery Succinctly
                            <cite>Cody Lindley</cite>
                        </a>
                    </li>
                </ul>
            </div>
        </div>


        <div id="legal">
            <ul class="footer-site-links">
                <li><a class="icon-pencil" href="https://learn.jquery.com/">Learning Center</a></li>
                <li><a class="icon-group" href="https://forum.jquery.com/">Forum</a></li>
                <li><a class="icon-wrench" href="../../api.jquery.com/">API</a></li>
                <li><a class="icon-twitter" href="https://twitter.com/jquery">Twitter</a></li>
                <li><a class="icon-comments" href="https://irc.jquery.org/">IRC</a></li>
                <li><a class="icon-github" href="https://github.com/jquery">GitHub</a></li>
            </ul>
            <p class="copyright">
                Copyright 2021 <a href="https://openjsf.org/">OpenJS Foundation</a> and jQuery contributors. All rights
                reserved. See <a href="https://jquery.org/license/">jQuery License</a> for more information. The <a
                    href="https://openjsf.org/">OpenJS Foundation</a> has registered trademarks and uses trademarks. For
                a list of trademarks of the <a href="https://openjsf.org/">OpenJS Foundation</a>, please see our <a
                    href="https://trademark-policy.openjsf.org/">Trademark Policy</a> and <a
                    href="https://trademark-list.openjsf.org/">Trademark List</a>. Trademarks and logos not indicated on
                the <a href="https://trademark-list.openjsf.org/">list of OpenJS Foundation trademarks</a> are
                trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any
                affiliation with or endorsement by them. OpenJS Foundation <a href="https://terms-of-use.openjsf.org/">Terms
                of Use</a>, <a href="https://privacy-policy.openjsf.org/">Privacy</a>, and <a
                    href="https://www.linuxfoundation.org/cookies">Cookie</a> Policies also apply.
                <span class="sponsor-line"><a href="https://www.digitalocean.com" class="do-link">Web hosting by Digital Ocean</a> | <a
                        href="https://www.stackpath.com" class="sp-link">CDN by StackPath</a></span>
            </p>
        </div>

    </div>
</footer>

<script type='text/javascript' src='//api.jquery.com/wp-includes/js/comment-reply.min.js?ver=4.5.2'></script>
<script type='text/javascript' src='//api.jquery.com/wp-includes/js/wp-embed.min.js?ver=4.5.2'></script>
<!-- at the end of the BODY -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js" onload="document.querySelector('input[name=\'s\']') && docsearch({apiKey: '3cfde9aca378c8aab554d5bf1b23489b',
		indexName: 'jquery',
		inputSelector: 'input[name=\'s\']',
		debug: true // Set debug to true if you want to inspect the dropdown
	})" async></script>
</body>
</html>
